Прозрачность заполнителя CSS Tailwind

Опубликовано: 7 Августа, 2021

Этот класс принимает множество значений в CSS, в котором все свойства описаны как в форме класса. Используя этот класс, мы можем установить непрозрачность любого текста-заполнителя. В CSS мы делаем это с помощью свойства CSS Opacity.

Класс непрозрачности заполнителя:

placeholder-opacity-0: Управляйте непрозрачностью цвета заполнителя элемента с помощью утилит placeholder-opacity- {amount}.

Примечание: значение непрозрачности можно изменять от 0 до 100 с диапазоном 5.

Синтаксис:

 <element class = "placeholder- {opacity}"> ... </element>

Пример:

HTML

 <!DOCTYPE html>
 < head >
    < link href =
 " https://unpkg.com/tailwindcss@ ^1.0/dist/tailwind.min.css"
          rel = "stylesheet" >
 </ head >
 
< body class = "text-center mx-4 space-y-2" >
    < h1 class = "text-green-600 text-5xl font-bold" >
        GeeksforGeeks
    </ h1 >
    < b >Tailwind CSS Placeholder Opacity Class</ b >
    < div class="mx-14 bg-green-200 grid grid-rows-4
                grid-flow-col text-justify p-4">
        < input class="placeholder-green-800 p-3 m-2 rounded-lg
                      placeholder-opacity-100 border-2
                      border-green-400 bg-green-100"
               placeholder = "Geeksforgeeks@gfg.org" >
        < input class="placeholder-green-800 p-3 m-2 rounded-lg
                      placeholder-opacity-75 border-2
                      border-green-400 bg-green-100"
               placeholder = "Geeksforgeeks@gfg.org" >
        < input class="placeholder-green-800 p-3 m-2 rounded-lg
                      placeholder-opacity-50 border-2
                      border-green-400 bg-green-100"
               placeholder = "Geeksforgeeks@gfg.org" >
        < input class="placeholder-green-800 p-3 m-2 rounded-lg
                      placeholder-opacity-25 border-2
                      border-green-400 bg-green-100"
               placeholder = "Geeksforgeeks@gfg.org" >
        < input class="placeholder-yellow-800 p-3 m-2 rounded-lg
                      placeholder-opacity-100 border-2
                      border-green-400 bg-green-100"
               placeholder = "Geeksforgeeks@gfg.org" >
        < input class="placeholder-yellow-800 p-3 m-2 rounded-lg
                      placeholder-opacity-75 border-2
                      border-green-400 bg-green-100"
               placeholder = "Geeksforgeeks@gfg.org" >
        < input class="placeholder-yellow-800 p-3 m-2 rounded-lg
                      placeholder-opacity-50 border-2
                      border-green-400 bg-green-100"
               placeholder = "Geeksforgeeks@gfg.org" >
        < input class="placeholder-yellow-800 p-3 m-2 rounded-lg
                      placeholder-opacity-25 border-2
                      border-green-400 bg-green-100"
               placeholder = "Geeksforgeeks@gfg.org" >
        < input class="placeholder-indigo-800 p-3 m-2 rounded-lg
                      placeholder-opacity-100 border-2
                      border-green-400 bg-green-100"
               placeholder = "Geeksforgeeks@gfg.org" >
        < input class="placeholder-indigo-800 p-3 m-2 rounded-lg
                      placeholder-opacity-75 border-2
                      border-green-400 bg-green-100"
               placeholder = "Geeksforgeeks@gfg.org" >
        < input class="placeholder-indigo-800 p-3 m-2 rounded-lg
                      placeholder-opacity-50 border-2
                      border-green-400 bg-green-100"
               placeholder = "Geeksforgeeks@gfg.org" >
        < input class="placeholder-indigo-800 p-3 m-2 rounded-lg
                      placeholder-opacity-25 border-2
                      border-green-400 bg-green-100"
               placeholder = "Geeksforgeeks@gfg.org" >
  
    </ div >
 </ body >
 
</ html > 

Выход:

непрозрачность заполнителя

CSS

Прозрачность заполнителя CSS Tailwind

HTML

РЕКОМЕНДУЕМЫЕ СТАТЬИ