Свойство CSS opacity

Свойство 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"



Читайте также:

• text-shadow

• Свойство zoom

• Отступы padding

• Отступы margin

• Как сделать рамку элементов border

• Как сделать фон на сайте html

• Как сделать анимацию в html

• Как сделать линейный градиент

• Радиальный градиент CSS


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

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.