Закрыть ... [X]

Как сделать прозрачность блока


Опубликовано: 05.11.2017, 16:56/ Просмотров: 1526

Серёжа СыроежкинСерёжа СыроежкинКопирайтер
теги: 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

Смотрите также:


Поделись с друзьями



Рекомендуем посмотреть ещё:



Html - Перекрытие блока прозрачным блоком - Stack Overflow на Крем для лица от уставшей кожи

Как сделать прозрачность блока Как сделать прозрачность блока Как сделать прозрачность блока Как сделать прозрачность блока Как сделать прозрачность блока Как сделать прозрачность блока Как сделать прозрачность блока

ШОКИРУЮЩИЕ НОВОСТИ