СSS Свойство opacity
Определение и использование
Свойство opacity задает уровень непрозрачности для элемента.
Уровень непрозрачности описывает уровень прозрачности, где 1 не является прозрачным вообще, 0.5 является 50% прозрачным, а 0 является полностью прозрачным.
Примечание: При использовании свойства opacity для добавления прозрачности к фону элемента все его дочерние элементы также становятся прозрачными. Это может сделать текст, внутри полностью прозрачного элемента, трудно читаемым. Если вы не хотите применять непрозрачность к дочерним элементам, используйте вместо этого значения цвета RGBA (см. "Дополнительные примеры" ниже).
| Значение по умолчанию: | 1 |
|---|---|
| Унаследованный: | нет |
| Анимируемый: | да, см. раздел отдельные свойства. Прочитайте о animatable Попробовать |
| Версия: | CSS3 |
| JavaScript синтаксис: | object.style.opacity="0.5" Попробовать |
Поддержка браузеров
Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| opacity | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Примечание: IE8 и более ранние версии поддерживают альтернативу, свойство filter. Например: filter:Alpha(opacity=50).
CSS Синтаксис
opacity: number|initial|inherit;
Значение свойств
| Значение | Описание | Воспроизвести |
|---|---|---|
| number | Задает непрозрачность. От 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный) | Воспроизвести » |
| initial | Устанавливает для этого свойства значение по умолчанию. Прочитайте о initial | Воспроизвести » |
| inherit | Наследует это свойство от родительского элемента. Прочитайте о inherit |
Примеры
Пример
Свойство opacity добавляет прозрачность к фону элемента, а также ко всем его дочерним элементам. Это делает текст внутри прозрачного элемента трудно читаемым:
div.first {
opacity: 0.1;
}
div.second {
opacity: 0.3;
}
div.third {
opacity: 0.6;
}
Редактор кода »
Пример
Чтобы не применять непрозрачность к дочерним элементам (как в примере выше), используйте вместо этого значения цвета RGBA. В следующем примере устанавливается непрозрачность для цвета фона, но не для текста:
div.first {
background: rgba(76, 175, 80, 0.1);
}
div.second {
background: rgba(76, 175, 80, 0.3);
}
div.third {
background: rgba(76, 175, 80,
0.6);
}
Редактор кода »
Совет: Узнать больше о цветах RGB в CSS RGBA Цвета.
Пример
Как использовать JavaScript для изменения непрозрачности элемента:
function myFunction(x) {
// Возвращает текст выбранного параметра
var opacity = x.options[x.selectedIndex].text;
var el = document.getElementById("p1");
if (el.style.opacity !== undefined) {
el.style.opacity = opacity;
} else {
alert("Ваш браузер не поддерживает этот пример!");
}
}
Редактор кода »
Связанные страницы
CSS Учебник: CSS Непрозрачность/Прозрачность
CSS Учебник: CSS RGBA Цвета
HTML DOM Справочник: Свойство opacity
