Серёжа СыроежкинСерёжа СыроежкинКопирайтер

Полупрозрачный сайт

теги: html, css, дизайн, фон

Мы уже научились менять фон сайта, устанавливать в качестве фона изображение и даже видео. Теперь поговорим о таком вопросе, как прозрачность фона 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>

В конструкторе сайтов "Нубекс" есть настройки полупрозрачности в композиции сайта, что позволит вам управлять прозрачностью элементов с помощью визуального редактора.

Комментарии 0