Научете повече за непрозрачността на CSS3

Направете прозрачното си фоново изображение

Едно от нещата, които можете лесно да направите в дизайна на печат, но не и в мрежата, е текст върху изображение или цветен фон и променете прозрачността на това изображение, така че текстът да избледнее на заден план. Но в CSS3 има свойство, което ще ви позволи да промените непрозрачността на елементите си така, че да избледняват и излизат: непрозрачност.

Как да използваме непрозрачността

Непокритият имот има стойност на прозрачността от 0.0 до 1.0.

0.0 е 100% прозрачен - всичко под този елемент ще се покаже напълно. 1.0 е 100% непрозрачен - нищо под елемента няма да се покаже.

Така че, за да зададете елемент на 50% прозрачен, бихте написали:

непрозрачност: 0.5;

Вижте някои примери за непрозрачност в действие

Бъдете сигурни, че да тествате в по-стари браузъри

Нито IE 6, нито 7 поддържат свойството CSS3 непрозрачност. Но нямате късмет. Вместо това IE поддържа алфа филтър за собственост само за Microsoft. Алфа филтрите в IE приемат стойности от 0 (напълно прозрачни) до 100 (напълно непрозрачни). За да получите прозрачност в IE, трябва да умножете непрозрачността си с 100 и да добавите алфа филтър към стиловете си:

филтър: алфа (непрозрачност = 50);

Вижте алфа филтъра в действие (само за IE)

И Използвайте префикси на браузъра

Трябва да използвате префиксите -moz- и -webkit-, така че по-старите версии на браузърите на Mozilla и Webkit да го поддържат:

-webkit-opacity: 0.5;
-мочувствителност: 0,5;
непрозрачност: 0,5;

Винаги поставяйте префиксите на браузъра първо и валидното свойство CSS3 последно.

Тествайте префиксите на браузърите в по-старите браузъри на Mozilla и Webkit.

Можете да направите изображения прозрачни също

Задайте непрозрачността на самата снимка и тя ще изчезне във фона. Това е наистина полезно за фоновите изображения .

И ако добавите маркер за закотвяне, можете да създадете ефект на задържане само чрез промяна на непрозрачността на изображението.

a: задържите img {
филтър: алфа (непрозрачност = 50)
филтър: progid: DXImageTransform.Microsoft.Alpha (непрозрачност = 50)
-мочувствителност: 0,5;
-webkit-opacity: 0.5;
непрозрачност: 0.5;
}

Въздейства на този HTML код:

Изпробвайте горните стилове и HTML в действие.

Поставете текст върху изображенията си

При непрозрачност можете да поставите текст върху изображение и да накарате изображението да избледнее там, където е този текст.

Тази техника е малко трудна, защото не можете просто да избледнеете изображението, тъй като това ще изчезне цялото изображение. И не можете да избледнявате текстовото поле , защото текстът ще избледнее и там.

1. Първо създадете контейнер DIV и поставете изображението си вътре:

   
   

2. Следвайте изображението с празен DIV - това е, което ще направите прозрачно.

   
   
   

3. Последното нещо, което добавите в HTML е DIV с текста в него:

   
   
   
   Това е кучето ми Шаста. Не е ли сладък!

4. Можете да го стил с CSS позициониране, за да поставите текста над изображението. Поставих текста си от лявата страна, но можете да го сложите вдясно, като промените останалите две: 0; свойства вдясно: 0; ,

   #изображение {
   позиция: относителна;
   ширина: 170 пкс;
   височина: 128px;
   марж: 0;
   }
   #текст {
   позиции: абсолютен;
   Горе: 0;
   лява: 0;
   ширина: 60px;
   височина: 118px;
   фон: #fff;
   подложка: 5px;
   }
   #текст {
   филтър: алфа (непрозрачност = 70);
   филтър: progid: DXImageTransform.Microsoft.Alpha (непрозрачност = 70);
   -мочувствителност: 0.70;
   непрозрачност: 0.7;
   }
   #words {
   позиции: абсолютен;
   Горе: 0;
   лява: 0;
   ширина: 60px;
   височина: 118px;
   фон: прозрачен;
   подложка: 5px;
   }

Вижте как изглежда