CSS :: Видимость элементов

css-свойство visibility

Если возникает необходимость скрыть элемент, можно поступить несколькими способами (см. пример №1). Во-первых, можно использовать значение none свойства display, тогда элемент временно будет удален из документа, а его место займут другие элементы (на рисунке визуально хорошо видно, что из семи блоков, место выделено только под шесть, т.к. к четвертому блоку применено данное значение и он вообще не отображается на странице). Во-вторых, видимость элемента можно определять через наследуемое свойство visibility, которое может принимать следующие значения:

visible – элемент будет отображен на странице;
hidden – элемент будет скрыт (спрятан), но при этом он не будет удален из потока документа и будет продолжать участвовать в форматировании страницы, при этом вполне можно сказать, что он просто стал полностью прозрачным;
collapse – предназначено для ячеек таблицы, но имеет различные эффекты в браузерах, поэтому лучше его пока не применять, а использовать значение hidden.

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Управление видимостью элементов</title>

	<style>
	
		.div_vis{
		width: 100px;
		height: 60px;
		padding: 5px;
		margin: 10px;
		border: solid 5px blue;
		background-color: yellow;
		}
		
		.vis_1{visibility: visible;}
		.vis_2{visibility: hidden;}
		.vis_3{opacity: 0.3;}
		.vis_4{display: none;}
		.vis_5{opacity: 0.7;}
		.vis_6{opacity: 0;}		
		.vis_7{opacity: 1;}		
		
	</style>
	
</head>
<body>

	<div style="background-color: green;">

		<div class="div_vis vis_1">
			visibility: visible;  
		</div>

		<div class="div_vis vis_2">
			visibility: hidden;  
		</div>

		<div class="div_vis vis_3">
			opacity: 0.3; 
		</div>

		<div class="div_vis vis_4">
			display: none; 
		</div>

		<div class="div_vis vis_5"> 
			opacity: 0.7; 
		</div>

		<div class="div_vis vis_6"> 
			opacity: 0; 
		</div>		

		<div class="div_vis vis_7"> 
			opacity: 1; 
		</div>

	</div>
		
</body>
</html>

Пример №1. Управление видимостью элементов

css-свойство opacity

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

CSS :: Видимость элементов

css-свойство visibility

css-свойство opacity

Быстрый переход к другим страницам