CSS свойство opacitycss3

CSS свойства

Определение и применение

CSS свойство opacitycss3 определяет уровень прозрачности для элемента (1 - элемент непрозрачный (это значение по умолчанию), 0,5/50% - среднее значение, 0 - элемент полностью прозрачный).

Поддержка браузерами

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
opacitycss34.02.09.03.19.012.0

CSS синтаксис:

opacity: "number | initial | inherit";

JavaScript синтаксис:

object.style.opacity = "1"

Значения свойства

ЗначениеОписание
numberОпределяет уровень прозрачности для элемента (1 - элемент непрозрачный (это значение по умолчанию), 0,5/50% - среднее значение, 0 - элемент полностью прозрачный).
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Да.

Интерактивный пример

Значения свойства opacity:










CSS код:

div {
opacity: ;
}

Результат:

primer

Пример использования

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования свойства opacity</title>
<style> 
.ham1 {
opacity: 0.5;
}
.ham2 {
opacity: 0.1;
}
</style>
</head>
	<body>
		<img src ="/images/notepad.png" alt = "hameleon_1">
		<img src ="/images/notepad.png" alt = "hameleon_2" class = "ham1">
		<img src ="/images/notepad.png" alt = "hameleon_3" class = "ham2">
	</body>
</html>

В данном примере мы разместили три изображения (элементы <img>) с прозрачностью 1 (значение по умолчанию), 0.5 (изображение с классом .ham1) и 0.1 (изображение с классом .ham2):

test1test2test3
CSS свойства