как сделать полупрозрачный фон для отдельного блока или страницы

Привет, друзья. Недавно в комментариях посетитель спросил, как сделать прозрачный или полупрозрачный фон. В своё время я писала пост как сделать прозрачность у баннеров.

Всё же хочу немного подробнее на этом остановиться. Дело в том, что существует 2 способа создания прозрачности элемента. С помощью свойства  opacity и свойства  background: rgba.
Будь то изображение, текст, баннер или сам фон.

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

Используем свойство opacity и видим следующий результат

Жили они с Cарой - долго и счастливо. 3 года счастливо, 57 - долго.

Прозрачность задаётся указанием числа от 0.0 до 1.0. Меньше число, менее заметен будет элемент.

<style>
 .fon1{
 background-image: url('https://p4.tabor.ru/feed/2017-08-18/16983427/572674_760x500.jpg');
 width: 270px;
 height: 270px;
 text-align: center;
 }
.fon1 .block{
 width: 240px;
 height: 250px;
position: absolute;
margin:5px 15px 5px 15px;

 opacity: 0.5;
 background: #FFFFCC;
 }
</style>

<div class="fon1">
<div class="block">
жили они с сарой - долго и счастливо.
3 года счастливо, 57 - долго.</div>
</div>

Обратите внимание, что при этом способе текст в блоке становиться тоже прозрачным.

Используем свойство background: rgba. Что является более современной альтернативой для свойства opacity

<style>
 .primer{
 background-image: url('https://p4.tabor.ru/feed/2017-08-18/16983427/572674_760x500.jpg');
 width: 270px;
 height: 250px;
 text-align: center;
 }
 .primer .block{
 width: 240px;
 height: 240px;
position: absolute;
margin:5px 15px 5px 15px;

 background: rgba(111, 155, 45, 0.6);
 background: #FFFFCC;
 }
</style>
<div class="primer">
<div class="block">
То же самое только текст не прозрачный</div>
</div>

Всё зависит от того, что вы хотите. Прозрачный или непрозрачный текст. Здесь к цвету в формате R G B добавляется прозрачность с таким значением 0.6. Так же, как и в первом примере его можно менять на ваше усмотрение.

Попробуйте сделать полупрозрачный фон отдельно взятой страницы, используя  свойство  opacity: Допустим, вот так.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

<style>.wrapper {
    position: relative;
    z-index: 1;
 
}

.bg {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: url("http://placekitten.com/g/800/600") center;
    opacity: .3;
}
</style>

<div class="wrapper">
<div class="bg">
</div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

</div>

Вывод

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

В отличие от свойства opacity, для блока, содержащего другие элементы, функция rgba() изменит прозрачность только блока.

Коды готовые и вы можете использовать их для оформления отдельных блоков или даже отдельной страницы в целом. Настройки совершенно простые. Следует лишь подобрать нужный фон в виде картинки и задать ему нужную прозрачность. Установить готовый код в режиме HTML в самом редакторе сообщений. 

Всем добра и до встречи. 

👇

Получайте новые сообщения с блога прямо на почту

Введите Ваш email