html.okpython.net
HTML и CSS для начинающих

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

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

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

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

Синтаксис

opacity: <число>

Значения

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

Ссылки

Примеры

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