изображение на фоне HTML CSS

Question

изображение на фоне HTML CSS

Рейтинг: 0Ответов: 3Опубликовано: 09.01.2023

Только начала изучать верстку и встретился с одной проблемой - на макете есть изображение, а сзади него есть фигура (прямоугольник) как фон. Вопрос - как правильно это реализовать в коде?

css html

Источник: Stack Overflow на русском

Answer 1

▲ 1

Лучше всего вытянуть картинку как svg и его на фон всего блока поставить. Картинке продукта задать размеры и отцентрировать (размеры нужны для того, чтобы в админку могли загрузить любую картинку в принципе и верстка не поехала)

Примерно так у тебя получится:

.product-wrap {
  position: relative;
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

img {
  position: relative;
  z-index: 2;
  width: 200px;
  height: 200px;
  object-fit: contain;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="product-wrap">
    <svg viewBox="0 0 450 450">
      <polygon fill="#ff00ff" points="409.7759065022574,301.53668647301794 301.536686473018,409.7759065022574 148.46331352698206,409.7759065022574 40.22409349774264,301.536686473018 40.22409349774264,148.46331352698206 148.46331352698195,40.2240934977427 301.536686473018,40.22409349774267 409.77590650225727,148.46331352698192"></polygon>
    </svg>
   
    <img src="https://upload.wikimedia.org/wikipedia/commons/9/9d/Tomato.png" />
  </div>
</body>
</html>

Answer 2

▲ 0

Вы можете посмотреть все стили и html через код через инспектор браузера Пример на скриншоте ниже

Answer 3

▲ 0

если это контентная стр, или блок переиспользуемый, то вам нужно объединить два слоя(изобр и фигуру). Для этого в фигме кликаем по меню Untitled https://monosnap.com/file/4WW64jRiqgWwrNmIesiQiAt3RaF877 и нажимаем выделенную строку (дубликат). В низу появится окошко маленькое, кликаем открыть. Далее находим оба слоя и выделяем зажав ctrl, далее нажимаем правой кнопкой мыши, выходит меню, где выбираем https://monosnap.com/file/oZag7rRPFazF3m7bEhbHKbuPW6rahl выделенную строку (group selection). И все, теперь можно экспортировать один слой, который мы получили. Если же фигура не будет менятся, то просто создайте два дива и спозициоируйте(position: absolute) либо картинку, либо фигуру.

изображение на фоне HTML CSS

Ответы