Сазнајте о ЦСС3 Опацити

Оставите своје позадине транспарентном

Једна од ствари које можете лако учинити у дизајну штампе, али не и на Вебу, је прекривање текста на слици или обојеној позадини, и промијените транспарентност те слике тако да текст остаје у позадини. Али постоји особина у ЦСС3 која ће вам омогућити да промените непрозирност ваших елемената тако да оне уђу и излазе: непрозирност.

Како користити својство прозирности

Имовина непрозирности преузима вредност количине транспарентности од 0.0 до 1.0.

0.0 је 100% транспарентно - било шта испод тог елемента ће се приказати у потпуности. 1.0 је 100% непрозирно - ништа испод елемента неће се показати.

Дакле, да бисте поставили елемент на транспарентност од 50%, писали бисте:

опацити: 0.5;

Погледајте неке примере нејасности у акцији

Будите сигурни да тестирате у старијим прегледачима

Ни ИЕ 6 нити 7 не подржавају ЦСС3 својство прозирности. Али ти ниси без среће. Уместо тога, ИЕ подржава алфа филтер само за Мицрософт. Алпха филтери у ИЕ прихватају вредности од 0 (потпуно транспарентно) до 100 (потпуно непрозирно). Дакле, да бисте добили транспарентност у ИЕ-у, требало би да помножите свој непрозирност за 100 и додате алфа филтер својим стиловима:

филтер: алфа (опацити = 50);

Погледајте алфа филтер у акцији (само ИЕ)

И Користите префиксе прегледача

Требали би да користите префиксе -моз- и -вебкит-тако да старије верзије Мозилла и Вебкит претраживача подржавају и то:

-вебкит-опацити: 0,5;
-моз-опацити: 0,5;
опацити: 0.5;

Увек ставите префиксе претраживача и важећи ЦСС3 својство.

Тестирајте префиксе претраживача у старијим прегледачима Мозилла и Вебкит.

Можете да направите слике провидне превише

Поставите непрозирност на саму слику и бледе у позадину. Ово је заиста корисно за позадинске слике .

А ако додате у сидрену ознаку, можете креирати ефекте лебдећи само променом нејасности слике.

а: ховер имг {
филтер: алфа (опацити = 50)
филтер: прогид: ДКСИмагеТрансформ.Мицрософт.Алпха (опацити = 50)
-моз-опацити: 0,5;
-вебкит-опацити: 0,5;
опацити: 0.5;
}

Утиче на овај ХТМЛ:

Тестирајте горе наведене стилове и ХТМЛ у акцији.

Ставите текст на своје слике

Са непрозирношћу можете поставити текст преко слике и изгледати да ће слика избледети тамо где је тај текст.

Ова техника је мало компликована, јер не можете једноставно да избледите слику, јер ће то избледи цијелу слику. А не можете избледети текстуално поље , јер ће текст такође нестати.

1. Прво креирате контејнер ДИВ и поставите слику унутар:

   
   

2. Пратите слику са празним ДИВ-ово је оно што ћете учинити транспарентним.

   
   
   

3. Последња ствар коју додате у свој ХТМЛ је ДИВ са текстом у њему:

   
   
   
   Ово је мој пас Схаста. Зар није сладак!

4. Створите га ЦСС позиционирањем, да бисте поставили текст изнад слике. Ставио сам текст на леву страну, али можете га ставити на десно променом два лијева: 0; својства на десно: 0; .

   #слика {
   позиција: релативна;
   ширина: 170пк;
   висина: 128пк;
   маржа: 0;
   }
   #тект {
   позиција: апсолутно;
   горе: 0;
   лево: 0;
   ширина: 60пк;
   висина: 118пк;
   бацкгроунд: #ффф;
   паддинг: 5пк;
   }
   #тект {
   филтер: алфа (опацити = 70);
   филтер: прогид: ДКСИмагеТрансформ.Мицрософт.Алпха (опацити = 70);
   -моз-опацити: 0,70;
   опацити: 0,7;
   }
   #речи {
   позиција: апсолутно;
   горе: 0;
   лево: 0;
   ширина: 60пк;
   висина: 118пк;
   позадина: транспарентна;
   паддинг: 5пк;
   }

Погледајте како изгледа