CSS opacity Свойство
Пример
Задайте уровень непрозрачности для элемента <div>:
div
{
opacity: 0.5;
}
Подробнее примеры ниже.
Определение и использование
Свойство opacity задает уровень непрозрачности для элемента.
Уровень прозрачности описывает уровень прозрачности, где 1 не является прозрачным, 0,5 составляет 50%, а 0 полностью прозрачен.
Примечание: При использовании свойства opacity для добавления прозрачности к фону элемента все его дочерние элементы также становятся прозрачными. Это может сделать текст внутри полностью прозрачный элемент трудно читать. Если вы не хотите применять непрозрачность к дочерним элементам, используйте вместо этого значения цвета RGBA (см. ниже "Дополнительные примеры").
| Значение по умолчанию: | 1 |
|---|---|
| Inherited: | no |
| Animatable: | yes, see individual properties. Читайте о animatable |
| Version: | CSS3 |
| Синтаксис JavaScript: | object.style.opacity="0.5" |
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| opacity | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Примечание: IE8 и более ранние версии поддерживают альтернативу, свойство Filter. Как: фильтр: альфа (непрозрачность = 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);
}
Совет: Узнайте больше о RGBA цветах в CSS RGBA Colors.
Пример
Как использовать JavaScript для изменения непрозрачности для элемента:
function myFunction(x) {
// Return the text of the selected option
var opacity = x.options[x.selectedIndex].text;
var el = document.getElementById("p1");
if (el.style.opacity !== undefined) {
el.style.opacity = opacity;
} else {
alert("Your browser doesn't support this example!");
}
}
Похожие страницы
CSS Справочник: CSS Opacity / Transparency
CSS Справочник: CSS RGBA Colors
HTML DOM Справочник: opacity Свойство