Прозрачный фон на css: background

Вы можете часто увидеть на сайтах прозрачный фон, к примеру есть красный фон страницы, а за фоном стоит простая картинка. Так вот в CSS есть замечательные способы создания прозрачности, рассмотрим основные.

1. Через свойство opacity

Способ не совсем правильный, но он будет отображаться во всех браузерах корректно.

Рассмотрим на примере двух блоков, у одного фон картинка, а у другого фон красный и с прозрачностью.

HTML

<div id="block1" class="block"></div>
<div id="block2" class="block"></div>

CSS

.block{
    width: 300px;
    height: 300px;
    position: absolute;
    top: 0px;
    left: 0px;
}

#block1{
    background-image: url("image/image1.jpg");
}

#block2{
    background-color: red;
    opacity: 0.7; // прозрачность
}

Прозрачность измеряется в от 0 до 1. Естественно ноль - это полная прозрачность.

2. background-color: RGBA

Здесь тоже самое, только в одном свойстве мы указываем и цвет, и прозрачность.

 background-color: rgba(0, 125, 215, 0.7);

Это современный подход, более простой, но не всех браузер отображается корректно.