CSS :: Свойство opacity

css-свойство opacity (от англ. opacity – непрозрачность) задает уровень прозрачности элемента. При этом даже полностью прозрачный элемент остается в потоке документа, поэтому его место не занимается другими элементами страницы. Кроме того, через частично прозрачный элемент будут просвечиваться фон и другие элементы, расположенные за ним вдоль оси Z.

Характеристики

Значение по умолчанию: 1.
Применяется: ко всем элементам.
Наследуется: нет.
Анимируется: да.
JavaScript: object.style.opacity="value".

Синтаксис

opacity: <число>

Значения

В качестве значения принимает числа от 0.0, когда элемент становится полностью прозрачным, до 1, когда элемент становится полностью непрозрачным.

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css-color-3/#opacity

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/opacity

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
	
		.div_opacity{
		width: 200px;
		height: 60px;
		padding: 5px;
		margin: 10px;
		border: solid 5px blue;
		background-color: yellow;
		}
		
		.vis_1{opacity: 0;}
		.vis_2{opacity: 0.4;}
		.vis_3{opacity: 0.8;}		
		.vis_4{opacity: 1;}
	
	</style>
	
</head>
<body>

	<div style="background-color: green;">
	
		<div class="div_opacity vis_1">
			opacity: 0; 
		</div>

		<div class="div_opacity vis_2">
			opacity: 0.4;  
		</div>

		<div class="div_opacity vis_3">
			opacity: 0.8; 
		</div>

		<div class="div_opacity vis_4">
			opacity: 1; 
		</div>
	
	</div>
	
</body>
</html>

Пример №1