Понедельник, 10 Сентябрь 2018 10:18

Прозрачность фона CSS

В некоторых случаях, при дизайне сайта (особенно, когда используется свойство z-index), становится весьма актуален вопрос прозрачности фона. Первое время подобные «хитрости» использовались при подключении изображений с прозрачностью (png), однако прозрачность png-файлов в то время не поддерживалась браузером Internet Explorer. И соответственно выглядело это мягко скажем – «ущербно». Сегодня свойство прозрачности можно настроить в CSS, что значительно упрощает работу веб-дизайнера, поскольку наличие изображений может вообще не потребоваться.

То есть создаётся блок (как правило контейнер div) которому задаются ширина и высота, а кроме того цвет фона и его прозрачность. И этот блок потом с помощью z-index накладывается на другие блоки. Либо же фиксируется свойством position.

Сама прозрачность указывается так:

.simple{
  background: rgba(255,255,255,.8);
}

Где первые 3 цифры – цвет фона в цветовой системе RGB (в данном случае это белый), а .8 = прозрачность фона 80%.

Спонсоры: