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

Question

Accepted Answer

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

Пример:


     class="bg">

/* Нижний фон */
.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

Answer

Чтобы наложить один фон на другой в CSS, можно использовать свойство background и указать несколько значений для него, разделяя их запятыми. Первый параметр указывает на задний фон, а последующие параметры будут наложены сверху.

.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

Похожие вопросы