| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 5.5+ | 1.0+ | 9.0+ | 3.1+ | 3.6+ | 1.0+ | 2.0+ |
Завдання
Зробити блоковий елемент з усім його вмістом напівпрозорим.
Рішення
Для зміни ступеня прозорості елемента застосовується стильове властивість opacity із значенням від 0 до 1, де 0 відповідає повній прозорості, а 1, навпаки, непрозорості об'єкта. У браузері Internet Explorer це властивість не працює, тому спеціально для нього доводиться використовувати filter, властивість, що не входить в специфікацію CSS. У прикладі 1 показано, як встановити прозорість шару для всіх браузерів.
Приклад 1. Напівпрозорий шар
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<HTML>
<head>
<meta charset= "utf-8">
<title>Напівпрозорий шар</title>
<style>
body {
background: url(images/star.png); /* Шпалери */
}
.layer {
padding: 5px; /* Поля навколо тексту */
background: #2bc671; /* Колір фону */
margin: 0 auto; /* Вирівнюємо шар по центру */
width: 80%; /* Ширина шару */
opacity: 0.85; /* Значення прозорості */
filter: alpha(Opacity=85); /* Прозорість в IE */
}
</style>
</head>
<body>
<div class="layer">
Очевидно перевіряється, що інтерполяція цікаво спотворює інтеграл Діріхле,
таким чином збулася мрія ідіота — твердження повністю доведено.
</div>
</body>
</html>
Результат цього прикладу показано на рис. 1.
Рис. 1. Напівпрозорий шар в браузері Microsoft Edge
Властивість filter додає прозорість тільки для тих елементів, де встановлено хоча б один із розмірів (width або height) або для елемента задано абсолютне позиціонування (position: absolute).
Також врахуйте, що прозорість діє на весь вміст шару, включаючи дочірні елементи, і збільшити для них рівень непрозорості за рахунок варіювання opacity не вийде. У прикладі 1, де прозорість шару встановлена як 0.7, текст всередині шару отримує таке ж значення. Його допустимо встановити менше, але перевищити значення прозорості 0.7 текст вже не може.