Мы уже научились менять фон сайта, устанавливать в качестве фона изображение и даже видео. Теперь поговорим о таком вопросе, как прозрачность фона CSS. Особенно эффектно смотрится полупрозрачный блок поверх изображения. Самый простой вариант изменить прозрачность фона или какого-либо блока на сайте - это использовать CSS-свойство opacity. В качестве примера воспользуемся кодом из предыдущей статьи:
<html>
<head>
<title>Прозрачность с помощью CSS - Нубекс</title>
<style>
body {
background: #000 url(nubex.png); /* Фоновый цвет и фоновый рисунок*/
color: #fff; /*Цвет текста на странице*/
background-attachment: fixed; /* Фон страницы фиксируется */
background-size: 100%;
}
.nubex {
background: blue;
opacity:0.6;
padding: 10px;
}
</style>
</head>
<body>
<div class="nubex"><p>Прозрачность этого блока задается свойством opacity. Прозрачность применяется и ко всем дочерним элементам блока, в том числе и тексту.</p></div>
</body>
</html>Мы создали блок div, установили для него синий цвет и полупрозрачный фон (opacity:0.6;).
Значение свойства opacity может варьироваться в пределах от 0 до 1, где 1 - это абсолютно непрозрачный фон, а 0 - абсолютно прозрачный.
Нужно учитывать, что свойство opacity применяется не только к самому элементу, но и ко всем дочерним элементам, в том числе и тексту внутри блока. Поэтому, если нужно установить только прозрачный фон CSS, то лучше стоит использовать RGBA-формат (R - красный, G - зеленый, B - синий, A - прозрачность).
Применим теперь RGBA-формат задания фона для нашего блока:
<html>
<head>
<title>Прозрачность с помощью CSS - Нубекс</title>
<style>
body {
background: #000 url(nubex.png); /* Фоновый цвет и фоновый рисунок*/
color: #fff; /*Цвет текста на странице*/
background-attachment: fixed; /* Фон страницы фиксируется */
background-size: 100%;
}
.nubex {
background: rgba(0, 0, 255, 0.6);
padding: 10px;
}
</style>
</head>
<body>
<div class="nubex"><p>Прозрачность этого блока задается свойством opacity. Прозрачность применяется и ко всем дочерним элементам блока, в том числе и тексту.</p></div>
</body>
</html>В конструкторе сайтов "Нубекс" есть настройки полупрозрачности в композиции сайта, что позволит вам управлять прозрачностью элементов с помощью визуального редактора.