Видимость элементов
http://belarusweb.net
Основы создания сайтов

Видимость элементов. css-свойства visibility и opacity

css-свойство visibility

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

  • visible – элемент будет отображен на странице;
  • hidden – элемент будет скрыт (спрятан), но при этом он не будет удален из потока документа и будет продолжать участвовать в форматировании страницы, при этом вполне можно сказать, что он просто стал полностью прозрачным;
  • collapse – предназначено для ячеек таблицы, но имеет различные эффекты в браузерах, поэтому лучше его пока не применять, а использовать значение hidden.
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Управление видимостью элементов</title>
	<style>
		.class_1{
		padding: 5px;
		margin: 10px;
		border: solid 5px blue;
		width: 100px;
		height: 60px;
		}
		.vis_1{visibility: hidden;}
		.vis_2{display: none;}
		.vis_3{opacity: 0;}
		.vis_4{opacity: 0.4;}
		.vis_5{opacity: 1;}
	</style>
</head>
<body>
		<div class="class_1 vis_1" style="background-color: yellow;">
			1.  </div>
		<div class="class_1 vis_2" style="background-color: violet;">
			2. </div>
		<div class="class_1 vis_3" style="background-color: green;">
			3. </div>
		<div class="class_1 vis_4" style="background-color: yellow;"> 
			4. </div>
		<div class="class_1 vis_5" style="background-color: yellow;"> 
			5. </div>
</body>
</html>

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

css-свойство opacity

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