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

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

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

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

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

HTML

CSS

    div{
          width: 300px;
          height: 300px;
          position: absolute;
          top: 0px;
          left: 0px;
    }
    
    #block1{
        backgroun-image('image/image1.jpg');
    }
    
    #block2{
        backround-color: red;
        opacity: 0.7; // прозрачность
    }

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

2. background-color: RGBA

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

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

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