Меню
✘Скрыть меню
Меню заработка
✘Скрыть меню
Загрузка.. nostroma.online from NOSTROMA - best life and beautiful workЭто ужасно тяжелая работа — ничего не делать – Оскар УайльдРешающую роль в работе играет не всегда материал, но всегда мастер – Максим ГорькийЯ слишком энергичен, чтобы работать – Марсель АшарЧто привлекло меня в карьере писателя? Отсутствие бумажной работы.Одни люди работают только для того чтобы работать, другие – для того, чтобы иметь возможность не работать в будущем.Занятие ерундой на рабочем месте развивает боковое зрение, слух и бдительность в целомСтоит статýя в лучах заката с огромным буем, в руках - граната.Друзья, если вы попались на лохотрон, не будьте эгоистами - предупредите других о таком сайте!Секрет гения — это работа, настойчивость и здравый смысл. Томас Эдисон
Меню заработка

Курсы HTML/CSS

Урок 23. Прозрачность элементов, свойство z-index, позиционирование fixed, большая картинка на затемнённом фоне

Содержание курса

Прозрачность элементов - свойство opacity

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

<!DOCTYPE html>
	<html>
		<head>
			<title>Свойство opacity</title>
			<style>
			
				#a {
					background: #c69; 
					font-size: 1.5em; 
					position: relative;
					}
					
				#a span {
					background: #ccf;
					height: 150px;
					position: absolute;
					left: 40%; 
					top: 5px; 
					opacity: 0.65;
					}
						
			</style>
		</head>
		<body>
			<div id="a">
				text text text text text text text text text text text text text text 
				text text text text text text text text text text text text text text 
				text text text text text text text text text text text text text text 
				text text text text text text text <span>Вставка в тексте</span>
				text text text text text text text text text text text text text text 
				text text text text text text text text text text text text text text 
				text text text text text text text text text text text text text text 
			</div>
		</body>
	</html>

Так будет выглядеть прозрачный элемент в браузере:
Свойство opacity

Свойство opacity часто используется для анимации плавного появления и исчезания элементов не странице (например, плавно появляющаяся подсказка).

Свойство z-index

В примере ниже для общего блока OUT задано относительное позиционирование, чтобы блоки с абсолютным позиционированием, находящиеся в нём, из него "не сбежали":

<!DOCTYPE html>
	<html>
		<head>
			<title>z-index</title>
			<style>
			
				#out {
					position: relative;
					background: #ccf;
					margin: 100px;
					padding: 70px;
					}
					
				#out div, #c {
					position: absolute;
					width: 150px;
					height: 150px;
					}
				
				#a {
					background: #ec3;
					left: -50px;
					top: -50px;
					}
				
				#b {
					background: #282;
					left: 50px; 
					top: 50px;
					}
					
			</style>
		</head>
		<body>
			<div id="out">
				<div id="a">DIV-a</div>
				<div id="b">DIV-b</div>
				text text text text text text text text text text text text text text
				text text text text text text text text text text text text text text
				text text text text text text text text text text text text text text
				text text text text text text text text text text text text text text
				text text text text text text text text text text text text text text
				text text text text text text text text text text text text text text
				text text text text text text text text text text text text text text
				text text text text text text text text text text text text text text
			</div>
			<div id="c">DIV-c расположен за пределами блока OUT</div>
		</body>
	</html>

Результат отображения этих элементов в браузере будет таким:

Сейчас элементы располагаются друг над другом в таком порядке, как они идут в коде html - первый, самый нижний слой - это блок OUT, над ним блок DIV-a (жёлтый) и самый верхний слой - это блок DIV-b (зелёный).

Этим расположением элементов по оси Z можно управлять через CSS при помощи свойства z-index, значение которого по умолчанию выставлено в auto. Задав жёлтому элементу DIV-a свойство z-index=2, а зелёному DIV-b z-index=1, мы тем самым поменяем их местами на оси Z:

<!DOCTYPE html>
	<html>
		<head>
			<title>z-index</title>
			<style>
			
				#out {
					position: relative;
					background: #ccf; 
					margin: 100px;
					padding: 70px;
					}
					
				#out div, #c {
					position: absolute; 
					width: 150px; 
					height: 150px;
					}
				
				#a {
					background: #ec3;
					left: -50px; 
					top: -50px;
					z-index: 2;
					}
				
				#b {
					background: #282;
					left: 50px; 
					top: 50px;
					z-index: 1;
					}
					
			</style>
		</head>
		<body>
			<div id="out">
				<div id="a">DIV-a</div>
				<div id="b">DIV-b</div>
				text text text text text text text text text text text text text text
				text text text text text text text text text text text text text text
				text text text text text text text text text text text text text text
				text text text text text text text text text text text text text text
				text text text text text text text text text text text text text text
				text text text text text text text text text text text text text text
				text text text text text text text text text text text text text text
				text text text text text text text text text text text text text text
			</div>
			<div id="c">DIV-c расположен за пределами блока OUT</div>
		</body>
	</html>

Получим такой результат:

Свойство z-index может быть и отрицательным.

Позиционирование fixed

Напомню о том, что по умолчанию у всех элементов свойство position=static. Позиционирование fixed прикрепляет элемент к области просмотра и тот остаётся на месте при прокрутке браузера. Такое явление показано в примере ниже, уверен, с такими элементами вы часто сталкивались на многих сайтах:

<!DOCTYPE html>
	<html>
		<head>
			<title>Позиционирование fixed</title>
			<meta charset=utf-8>
			<style>
			
				#out {
					margin: 0 0 0 400px;
					background: #ccf; 
					font-size: 2em;
					height: 3000px;
					}
					
				#out span {
					position: fixed;
					background: #369;
					height: 150px;
					width: 150px;
					color: fff;
					top: 0; 
					left: 0;
					right: 0;
					bottom: 0;
					margin: auto;
					}
						
			</style>
		</head>
		<body>
			<div id="out">Начало<span>вставка</span> и продолжение текста
			</div>
		</body>
	</html>

Большая картинка на затемнённом фоне

Думаю, на многих сайтах вы встречались с таким явлением, когда при клике на какую-то маленькую картинку появляется затемнённый полупрозрачный фон и большая картинка появляется по центру области просмотра. Реализуется это при помощи нескольких свойств, которые мы уже изучили. Подведём итог ранее изученного и реализуем это чудо в коде.

Для этого нам понадобится две одинаковые картинки, одна из которых будет большой (та, что появляется по центру экрана), а вторая малой (которая будет просто находится в тексте на странице).

Малую картинку сделаем ссылкой, ведущей на большую картинку, а затемнённый фон реализуем при помощи дополнительного блока. У большой картинки и блока с затемнённым фоном выставим фиксированное (fixed) позиционирование . Большую картинку установим по центру области просмотра, а блок с затемнённым фоном привяжем ко всем 4-м сторонам области просмотра, тем самым растянув его. Также нам потребуется написать небольшой сценарий на языке JavaScript, который будет менять свойство display у большой картинки при клике на малую картинку для того, чтобы большая картинка появлялась в нужный момент. Всё это реализовано в коде ниже:

<!DOCTYPE html>
	<html>
		<head>
			<title>Всплывающая картинка на затемнённом фоне</title>
			<meta charset=utf-8>
			<style>
			
				* {
					text-align: justify;
					}
					
				#small {
					float: left; 
					margin: 0 20px 20px 0; 
					border: 3px solid green;
					}
						
				#small img {
					display:block;
					} /*убрали отступ под картинкой*/
					
				#black-fon {
					position: fixed;
					left: 0;
					top: 0; 
					right: 0;
					bottom: 0;
					background: rgba(0,0,0,0.6);
					}
						
				#big-img {
					position: absolute;
					left: 0; 
					top: 0; 
					right: 0; 
					bottom: 0;
					margin: auto;
					width: 600px;
					height: 400px;
					border: 5px solid #fff;
					border-radius: 10px;
					} /*здесь задаём реальные размеры большой картинки*/
					
			</style>
		</head>
		<body>
			<div id="black-fon"></div><!-- затемнённый фон -->
			<div id="big-img" alt=''>
			    <img src="big.jpg" alt=''>
			</div>
			<h1>Постоянное информационное обеспечение </h1>
			 <a href="big.jpg" id='small'>
				 <img src="big.jpg" alt=''>
			 </a>
			 <p>Товарищи! консультация с широким активом играет важную
			 роль в формировании модели развития. Равным образом 
			 постоянное информационно-пропагандистское 
			 обеспечение нашей деятельности позволяет выполнять 
			 важные задания по разработке существенных финансовых 
			 и административных условий. С другой стороны реализация
			 намеченных плановых заданий позволяет выполнять важные
			 задания по разработке новых предложений. Равным образом
			 постоянный количественный рост и сфера нашей активности
			 играет важную роль в формировании соответствующий условий
			 активизации.</p>
			 
<!--скрипт для изменения свойства display при клике на картику-->
<script>
	var black_fon =  document.getElementById( 'black-fon');
	var big_img =  document.getElementById( 'big-img');
	var small =  document.getElementById( 'small');
	
	black_fon.style.display = 'none';
	big_img.style.display = 'none';
	
	small.onclick = function(event){
		event = event || window.event;
		if(event.preventDefault)
		event.preventDefault();
		else event.returnValue = false;
		
		black_fon.style.display = 'block';
		big_img.style.display = 'block';}
		
black_fon.onclick = function(){
	black_fon.style.display = 'none';
	big_img.style.display = 'none';}
	
big_img.onclick = function(){
	black_fon.style.display = 'none';
	big_img.style.display = 'none';}
</script>
		</body>
	</html>

Здесь мы не будем подробно разбирать код скрипта, более подробно со скриптами мы познакомимся на курсе JavaScript.

Комментарии

Введите Ваше имя:*

Введите e-mail:

Ваш комментарий:*

* Обязательные поля


Комментарий №1
25-06-2018 10:34:19
Игорь
Неудобно то, что для картинки на затемнённом фоне нужно создавать два графических файла