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

4 года назад

Человек-Молекула

Присоединяйтесь к нашему Telegram-сообществу

Ответы

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

Пример:

<body>
    <div class="bg"></div>
</body>

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

год назад

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

Чтобы наложить один фон на другой в 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 предотвращает повторение фонового изображения.

год назад

Ivan Gagarinov

10 месяцев

QA-инженер по тестированию на Java: с нуля до автоматизатора

8 месяцев

QA-инженер по тестированию: с нуля до автоматизатора

8 месяцев

QA-инженер по тестированию: с нуля до автоматизатора

5 месяцев

Автоматизатор тестирования на Python (TW)

Освоите Pytest, работу с API, CI/CD. Курс для тех, кто хочет перейти от ручного тестирования к востребованной профессии автоматизатора

5 месяцев

Автоматизатор тестирования на Python (TW)

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