Картинка фон div: background-image | htmlbook.ru

html — Фоновое изображение в div не занимает весь вид

Задавать вопрос

спросил 2 года, 7 месяцев назад

Изменено 2 года, 7 месяцев назад

Просмотрено 346 раз

Я работаю над платформой электронной коммерции. я должен показать Изображение SoldOut поверх изображения продукта, если все общее количество равно нулю. Вот мой css для проданных товаров.

 &__imageSoldOut {
    цвет фона: зеленый;
    дисплей: гибкий;
    выравнивание элементов: по центру;
    выравнивание содержимого: по центру;
    фоновая позиция: центр;
    фоновый повтор: без повтора;
    ширина: 100%;
    высота: 15бэр;
    объект подходит: обложка;
    картинка {
      подходит для объекта: содержит;
      максимальная ширина: 70%;
    }
    @media (максимальная ширина: $маленький экран) {
      высота: 210 пикселей;
    }
  }
 

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

• html
• css
• reactjs
• web
• jsx

Вы можете установить backgroundSize (https://www.w3school s.com/cssref/css3_pr_background-size.asp) на 100% высоты в этом случае, чтобы не перекашивать изображение и не заполнять его как по ширине, так и по высоте

backgroundSize: «[ширина] [высота]»

2

В вашем JSX удалите

backgroundImage и используйте background и напишите url() вместе с cover .