Прозрачность фона CSS. Как сделать прозрачный и полупрозрачный фон на сайте

Прозрачность фона на сайте создается через свойста CSS. Добиться прозрачности можо двумя способами: через свойство opacity и background:rgba(). Давайте рассмотрим каждый из них, а далее проведем сравнение.

1. Свойство CSS opacity для прозрачности фона

В CSS есть свойство opacity с помощью которого можно задавать прозрачность изображений, текстов, в том числе и фонов.

Задание прозрачности задается просто указанием вещественного числа от 0.0 до 1.0. Чем меньше число, тем менее заметен будет объект.

opacity: 0.5; // Полупрозрачность
opacity: 0.2; // Объект виден только на 20%
opacity: 0.8; // Объект виден только на 80%

Давайте рассмотрим пример со свойством opacity.

<html>
<head>
<style>
	.primer1{
	background-image: url('img/opacity-1.jpg');
	width: 270px;
	height: 250px;
	text-align: center;
	}
	.primer1 .block{
	width: 150px;
	height: 150px;
	border: 1px solid #000;
	position: absolute;
	margin: 54px;
	opacity: 0.5;
	background: #77aa66;
	}
</style>
</head>
<body>
	<div class="primer1">
		<div class="block">Текст также прозрачный</div>
	</div>
</body>
</html>

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

Текст также прозрачный

2. Прозрачность через свойство CSS background:rgba()

Вторым вариантом задания прозрачности фона на сайте является свойство CSS background:rgba. Рассмотрим пример

<html>
<head>
<style>
	.primer1{
	background-image: url('img/opacity-1.jpg');
	width: 270px;
	height: 250px;
	text-align: center;
	}
	.primer1 .block{
	width: 150px;
	height: 150px;
	border: 1px solid #000;
	position: absolute;
	margin: 54px;
	background: rgba(111, 155, 45, 0.6);
	background: #77aa66;
	}
</style>
</head>
<body>
	<div class="primer1">
		<div class="block">Текст также прозрачный</div>
	</div>
</body>
</html>

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

Текст непрозрачный

Разница между двумя способами заключается в том, что текст внутри блока становится прозрачным в случае использования opacity. Во втором случае такой проблемы нет. Поэтому нужно смотреть уже по ситуации - что конкретно Вы ждете.

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