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 текст вже не може.