Как наложить фон на фон css

Question

Алёна Шереметьева · Accepted Answer

Чтобы наложить фон на фон в CSS, можно использовать **псевдоэлементы** и **абсолютное позиционирование** **Пример:** ```html

``` ```css /* Нижний фон */ .bg:before { background-color: #ff0000 ; width: 400px; height: 400px; position: absolute; top: 0px; left: 0px; content: ''; } /* верхний фон */ .bg:after { content: ''; background-color: #ff0 ; display: block; width: 212px; height: 200px; position: absolute; top: 0px; left: 0px; /* Чтобы увидеть что фон наложишься поверх другого сделаем фон немного прозрачным */ opacity: 50%; } ``` Результат наложения будет выглядеть следующим образом: ![enter image description here](https://sun9-72.userapi.com/impg/ckSod_2J0oVrKHsTHfDGAEDqO4KMdP9dBcpTsw/72U9avJ4di0.jpg?size=651x614&quality=96&sign=f6c124c7031b3bd30a9880c806082c55&type=album "enter image title here")

Ivan Gagarinov · Answer

Чтобы наложить один фон на другой в CSS, можно использовать свойство background и указать несколько значений для него, разделяя их запятыми. Первый параметр указывает на задний фон, а последующие параметры будут наложены сверху.

```css
.background {
    background: 
        url('background1.jpg') center center/cover no-repeat,
        url('background2.jpg') center center/cover no-repeat;
}
```

В этом примере background1.jpg является задним фоном, а background2.jpg наложен поверх него. С помощью center мы устанавливаем позицию фона по центру холста, cover обеспечивает его масштабирование так, чтобы он занимал всю доступную площадь, а no-repeat предотвращает повторение фонового изображения.

Как наложить фон на фон css

Ответы

Каталог