opacity
opacity
| Браузер | Internet Explorer | Netscape | Opera | Safari | Mozilla | Firefox | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0 |
| Поддерживается | Нет | Нет | Нет | Да | Да | Да | Да | Да | Да | Да | Нет | Нет | Да | Да |
Краткая информация
| CSS | CSS3 |
|---|---|
| Значение по умолчанию | 1 |
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Аналог HTML | Нет |
| Ссылка на спецификацию | http://www.w3.org/TR/css3-color/#transparency |
Описание
Определяет уровень прозрачности элемента веб-страницы. При частичной или полной прозрачности через элемент проступает фоновый рисунок или другие элементы, расположенные ниже полупрозрачного объекта.
Синтаксис
opacity: значение
Аргументы
В качестве аргумента выступает число из диапазона [0.0; 1.0]. Значение 0 соответствует полной прозрачности элемента, а 1, наоборот ? его непрозрачности. Дробные числа вида 0.6 устанавливают полупрозрачность. Допускается писать числа без нуля впереди, вида opacity: .6.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>opacity</title>
<style type="text/css">
IMG.semi {
opacity: 0.5; /* Полупрозрачность элемента */
}
</style>
</head>
<body>
<p>
<img src="igels.gif" alt="Обычный рисунок">
<img src="igels.gif" alt="Полупрозрачный рисунок" class="semi">
</p>
</body>
</html>
Результат данного примера показан на рис. 1.
Рис. 1. Результат использования opacity
Примечание
Internet Explorer для изменения прозрачности использует фильтры, для этого браузера следует записать filter: alpha(opacity=50), где аргумент opacity может принимать значение от 0 до 100.