прозрачность фона css

Прозрачность фона css и и полупрозрачность — простые методы реализации

Прозрачность фона css и полупрозрачный фон css

В CSS нет такого свойства, как прозрачность. Но вы можете добиться прозрачности, вставив псевдоэлемент с регулярной непрозрачностью, точный размер элемента за ним. Свойство CSS3 для прозрачности — непрозрачность, и оно является частью рекомендации W3C CSS3.

div { opacity: 0.6; }

Уровень непрозрачности описывает уровень прозрачности, он колеблется от 0.0 до 1.0. Уровень 0.0 полностью прозрачен, 0,5 - 50%, а уровень 1.0 не прозрачен. Непрозрачность имеет начальное значение по умолчанию 1 (100% непрозрачный).
прозрачность фона css
прозрачность фона css

ИСХОДНЫЙ КОД

<!DOCTYPE html> <html> <head> <style> img { opacity: 0.3; filter: alpha(opacity=30); /* For IE 8 & 9 (more valid) */ } </style> </head> <body> <img src=»img/duck.png» width=»192″ height=»191″ alt=»transparent image»> </body> </html>

Создание прозрачного изображения

Вы можете создавать прозрачность фона css для изображений, используя свойство непрозрачности CSS. Первое изображение — это уровень непрозрачности 1.0, а второе изображение — уровень прозрачности 0.3.

прозрачность фона css
Прозрачный квадратный фон для текста
Следующая программа показывает прозрачную рамку над изображением, и вы можете написать свой текст в прозрачной рамке.
прозрачность фона css

исходный код
<!DOCTYPE html> <html> <head> <style> .duck { width:190px; height:190px; background: url(img/duck.png) no-repeat; border:5px solid #000000; font-size: 30px; font-weight: 900; color:blue; } .trBorder { height: 150px; width: 150px; margin: 20px; background: rgba(255,255,255,.5); } </style> </head> <body> <div class=»duck»> <div class=»trBorder» align=center> Write your text here </div> </div> </body> </html>

прозрачный текст
Следующий код использует сложный способ отображения текста как прозрачный.

<!DOCTYPE html> <html> <head> <style> .duck { width:192px; height:191px; background: url(img/duck.png) no-repeat; border:5px solid #000000; font-size: 70px; color:rgba(255,255,255,.5); font-weight: 900; } .trBorder { height: 120px; width: 120px; margin: 30px; border: 10px solid rgba(255,255,255,.5); } </style> </head> <body> <div class=»duck»> <br> Duck </div> </body> </html>

Поделиться с друзьями:
Заполните адрес доставки и выберите метод оплаты
[contact-form-7 404 "Not Found"]

[su_spacer size=»40″]

[su_label type=»success»]Ваши данные конфиденциальны и не будут переданы третьим лицам[/su_label]

[su_highlight background=»#99e9ff»]Ваш менеджер: Александр тел.+79024677724[/su_highlight]

 

×
Яндекс.Метрика