Картинка фон div: Фон в CSS (background-color, background-image)

Как разместить фоновое изображение с помощью псевдоселекторов ::before в CSS?

< html lang = "en" >     < head >      < мета кодировка = "UTF-8" > < Meta Имя = "Viewport" Содержание = "шириной =-ширина устройства, первоначальный Scale = 1. 0" > ". < Название > Как разместить фоновое изображение использование псевдоселекторов ::before ?      title >          < style >          * {              margin: 0px;              padding: 0px;          }              body {              text-align: center; } H2 { Цвет: зеленый; {              ширина: 100vw;              высота: 100 вх;              дисплей: гибкий;              justify-content: center;              align-items: center;              цвет: черный;              вес шрифта: полужирный;              размер шрифта: 2rem; } . Container :: Перед { Содержание: '';             background: url('bg.png')                   не повторяющийся центр, центр/обложка;              позиция: абсолютная;              непрозрачность: 0,3;              верх: 0 пикселей;              слева: 0 пикселей;              ширина: 100vw;              высота: 100 вх;              z-индекс: -1;          }              span {              размер шрифта: 2em;          }       style > head >     < body >      < раздел класс = "Контейнер" > Geeksforgeeks < BR > < BR > Как разместить фоновое изображение. селекторы?      раздел > тело     html >

Код Полноразмерное фоновое изображение с прозрачным наложением | by Daniel Zuzevich

Создайте полноразмерное фоновое изображение с наложением, сказали они, это будет весело, сказали они…

Основные изображения являются одним из основных элементов современного веб-дизайна и разработки, и на первый взгляд может показаться, что они сложно кодировать с помощью HTML и CSS самостоятельно. Тем не менее, я здесь, чтобы проболтаться и показать вам, что построить что-то подобное на самом деле так просто, что моя бабушка могла это сделать!

В этой статье мы построим это в рекордно короткие сроки, и я буду добавлять скриншоты во время нашего прогресса! Когда вы закончите, не стесняйтесь проверить готовый рабочий пример и видео на YouTube, размещенное в конце статьи.

Для достижения наилучших результатов рекомендую прочитать статью, а затем просмотреть видео! К концу вы станете мастером HTML и CSS.

Начнем!

Мы упростим себе задачу и возьмем бесплатное HD-фото с Unsplash. Изображение, которое мы будем использовать, — это красивая картинка леса.

Фотография леса для использования в нашем полноразмерном фоновом изображении.

Теперь, когда у нас это есть, давайте начнем создавать базовый HTML-код, чтобы разместить эту фотографию на нашей веб-странице.

Наше главное изображение будет состоять всего из двух элементов HTML.

• Родительский div, которому мы дадим класс big-image .
• Дочерний div, которому мы дадим класс overlay .

Неважно, какие имена классов вы даете элементам, если они имеют стиль, описанный в разделе CSS.

Вот весь HTML, который нам понадобится:

Структура HTML для фонового изображения и наложения.

Сначала стилизуем элемент большого изображения. Все, что нам действительно нужно сделать, это установить этот элемент равным 100% высоты и ширины области просмотра, а затем добавить несколько свойств фона CSS.

Вот CSS для этого во всей красе.

Теперь наше главное изображение уже видно в браузере.

Наше изображение теперь видно в браузере и настроено на полную ширину!

Последний шаг настолько прост, что моя бабушка уже сделала это раньше нас! Догоним ее.

Все, что нам нужно сделать здесь, это создать div, который будет составлять 100% высоты и ширины его родительского элемента, который в нашем случае равен .big-image . Мы собираемся убедиться, что мы также установили для оверлейного элемента div абсолютное положение, чтобы гарантировать, что он будет буквально лежать поверх .big-image .

Но любое прозрачное наложение было бы неполным без добавления к нему какого-либо цвета, поэтому нам нужно увидеть его фоновый цвет, убедившись, что мы понизили уровень его непрозрачности.