Прозрачный фон на CSS


В современном дизайне достаточно часто используется полупрозрачные слои, которые зачастую заставляют серьезно задуматься начинающего web-разработчика. Все из-за того что селектор opacity, который предлагают использовать влияет не только на фон, но и на весь блок в целом.

Для того чтобы фон у элемента был прозрачен, а текст и/или картинки в нем остались видимыми, лучше использовать формат RGBA частью которого является альфа-канал, который и отвечает за значение прозрачности. Синтаксис применения RGBA выглядит следующим образом:

.someStyle {
    background: rgba(0, 170, 238, 0.9); /* Цвет фона */
    color: #fff; /* Цвет текста */
   }