CSS opacity, примеры. Прозрачность в html

Свойство CSS opacity отвечает за прозрачность элементов (картинки, текста, блоки) в html.

Синтаксис CSS opacity

opacity: value;

Где value может принимать вещественные значения в диапазоне от 0.0 до 1.0. Значение 1.0 - означает, что прозрачность отсутствует (по умолчанию).

Примеры: как прозрачность в html

Пример №1. Прозрачное изображение в html

Первая картинка выведена без прозрачности, вторая с прозрачностью 0.5

<html>
<head>
<style>
	.primer1{
	padding: 5px;
	opacity: 0.5;
	}
</style>
</head>
<body>
	<img src="img/opacity-1.jpg">
	<img class="primer1" src="img/opacity-1.jpg">
</body>
</html>

На странице преобразуется в следующее

Пример №2. Эффекты с прозрачностью в html

По умолчанию блок частично прозрачный. При наведении курсора мыши блок становится ярким. Такие эффекты зачастую используются в дизайне сайтов.

<html>
<head>
<style>
	.primer2{
	padding: 5px;
	opacity: 0.5;
	}
	.primer2:hover{
	padding: 5px;
	opacity: 1;
	cursor: pointer;
	}
</style>
</head>
<body>
	<img class="primer2" src="img/opacity-1.jpg">
</body>
</html>

На странице преобразуется в следующее

Пример №3. Прозрачный блок на изображении в html

Ниже приведен пример полупрозрачного блока, который частично закрыл изображение. Блок специально накрывает изображение не полностью с целью показать, как он выглядит на пустом фоне.

<html>
<head>
<style>
	.primer3{
	padding: 5px;
	opacity: 1;
	}
	.block3{
	width: 100px;
	height: 100px;
	background: #1E90FF;
	margin: 0px 0px -60px 80px;
	border: 1px solid #000;
	opacity: 0.5;
	}
</style>
</head>
<body>
	<div class="block3"></div>
	<img class="primer3" src="img/opacity-1.jpg">
</body>
</html>

На странице преобразуется в следующее

Примечание
Internet Explorer до версии 9.0 для изменения прозрачности использует фильтры, для этого браузера следует записать filter: alpha(opacity=50), где параметр opacity может принимать значение от 0 до 100.

Для обращения к opacity из JavaScript нужно писать следующую конструкцию:

object.style.opacity="VALUE"

← Перейти в каталог CSS уроков