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

Синтаксис CSS opacity

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

Пример 1

[html]
<html>
<head>
<style>
.primer1{
padding: 5px;
opacity: 0.5;
}
</style>
</head>
<body>
<img src="https://forumupload.ru/uploads/0019/ef/02/2/82354.jpg">
<img class="primer1" src="https://forumupload.ru/uploads/0019/ef/02/2/82354.jpg">
</body>
</html>
[/html]

Код

Код:
<html>
<head>
<style>
	.primer1{
	padding: 5px;
	opacity: 0.5;
	}
</style>
</head>
<body>
	<img src="https://forumupload.ru/uploads/0019/ef/02/2/82354.jpg">
	<img class="primer1" src="https://forumupload.ru/uploads/0019/ef/02/2/82354.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="https://forumupload.ru/uploads/0019/ef/02/2/82354.jpg">
</body>
</html>
[/html]

Примечание

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

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

object.style.opacity="VALUE"

[good]