Прозрачность фона 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. Во втором случае такой проблемы нет. Поэтому нужно смотреть уже по ситуации – что конкретно Вы ждете.




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

• Свойство text-decoration

• Свойство vertical-align

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

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

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

• Отступ с помощью свойства padding

• Отступ с помощью свойства margin

• letter-spacing

• CSS font


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

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

Copy Protected by Chetan's WP-Copyprotect.