Видимость элементов
belarusweb.net
© Петр Романовский Минск, 2016-2018.



belarusweb.net
Основы создания сайтов...

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

css-свойство visibility

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

<!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, когда элемент становится полностью непрозрачным.

Видеоуроки по курсу CSS

Комментарии (0)

Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!