| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 5.5+ | 3.0+ | 9.2+ | 3.1+ | 3.0+ | 2.0+ | 1.0+ |
Завдання
Змінити значення прозорості зображення.
Рішення
За керування прозорістю елемента на сторінці відповідає стильове властивість opacity, яке відноситься до CSS3. В якості значення застосовуються дробові числа від 0 до 1, де нуль відповідає повній прозорості, а одиниця, навпаки, непрозорості об'єкта.
Старі версії Internet Explorer не підтримує opacity, тому для цього браузера слід використовувати специфічну властивість filter зі значенням alpha(Opacity=X), де X мається на увазі ціле число від 0 до 100. Це значення визначає рівень прозорості: 0 — повна прозорість; 100 — навпаки, непрозорість об'єкта.
Поєднуючи воєдино дві властивості, отримаємо універсальний код, який встановлює задану прозорість для зображень (приклад 1).
Приклад 1. Напівпрозоре зображення
HTML5CSS 2.1CSS3IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8">
<title>Прозорість</title>
<style>
.transparent75 {
filter: alpha(Opacity=75); /* Напівпрозорість для IE */
opacity: 0.75; /* Напівпрозорість для інших браузерів */
}
.transparent50 {
filter: alpha(Opacity=50);
opacity: 0,5;
}
.transparent25 {
filter: alpha(Opacity=25);
opacity: 0.25;
}
</style>
</head>
<body>
<p>
<img src="images/cat.jpg" alt="Оригінальне зображення">
<img src="images/cat.jpg" alt="Непрозорість 75%" class="transparent75">
<img src="images/cat.jpg" alt="Непрозорість 50%" class="transparent50">
<img src="images/cat.jpg" alt="Непрозорість 25%" class="transparent25">
</p>
</body>
</html>
Результат приклад показаний на рис. 1.
Рис. 1. Фотографія з різними значеннями прозорості
В даному прикладі спочатку наводиться вихідна фотографія, до якої не застосовуються налаштування прозорості, наступні фотографії відображаються з рівнем непрозорості 75%, 50% і 25%.