0

Каким образом можно подложить SVG картинки как на макете (изображение макета прикреплено)? SVG картинки это всё кроме текста, а именно оранжевые, фиолетовые, голубые пятна и погрузчик. Зелёной рамкой обозначил минимальную ширину страницы. Всё кроме оранжевых пятен сделал, но с четырмя оранжевыми пятнами ничего не получается, если делать как фон, то из блока не выходит. Да и все остальные подложки тоже под вопросом, правильно ли реализовано. Код ниже:

https://codepen.io/nomiy/pen/XWWXoMG

<body class="main">
  <section class="about">
    <h2 class="about__title">Выдающийся<br> имидж: гипотезы и теории глазами <span class="about__title-popup"> современников</span></h2>
    <p class="about__text">Повышение жизненных стандартов неестественно экономит селлинг. <span class="about__text-question">?</span></p>
    <p class="about__text">Несмотря на сложности, рекламное сообщество синхронизирует бренд.</p>
    <ul class="about__list">
      <li class="about__item">
        <span class="about__item-big">50 +</span> <span class="about__item-middle">теорий</span><br>среди клиентов
      </li>
      <li class="about__item">
        <span class="about__item-big about__item--background1">30 +</span> <span class="about__item-middle">стран мира</span> охвачены нами
      </li>
      <li class="about__item">
        <span class="about__item-big">15</span> <span class="about__item-middle">лет</span><br>в отрасли
      </li>
      <li class="about__item">
        <span class="about__item-big">1</span> <span class="about__item-middle">день</span><br>на создание имиджа
      </li>
    </ul>
    <img class="about__image-layer1" src="https://svgshare.com/i/FUd.svg" width="778" height="556">
    <img class="about__image-layer2" src="https://svgshare.com/i/FVt.svg" width="485" height="415">
    <img class="about__image-layer3" src="https://svgshare.com/i/FVY.svg" width="438" height="440">
  </section>
</body>
.main {
  background-color: #266aa0;
  background: linear-gradient(#266aa0, #081f73);
}
.about {
  width: 1238px;
  margin: 0 auto;
  background-image: url("https://svgshare.com/i/FU8.svg");
  background-size: 341px 118.44px;
  background-repeat: no-repeat;
  background-position: left 266px top 96px;
  position: relative;
}

.about__title {
  width: 702px;
  font-size: 60px;
  line-height: 64px;
  font-weight: normal;
  font-family: "Didact Gothic", "Arial", sans-serif;
  color: #ffffff;
  padding: 0;
  margin: 0;
  margin-bottom: 14px;
}

.about__title-popup {
  background-image: linear-gradient(to right, #ffffff 40%, transparent 0%);
  background-position: 0 1.22em;
  background-repeat: repeat-x;
  background-size: 10px 2px;
  position: relative;
}

.about__image-layer1 {
  position: absolute;
  top: 18px;
  right: -172px;
}

.about__image-layer2 {
  position: absolute;
  top: 136px;
  right: -38px;
}

.about__image-layer3 {
  position: absolute;
  top: 60px;
  right: 30px;
}

.about__text {
  width: 400px;
  font-size: 20px;
  line-height: 32px;
  color: #ffffff;
  padding: 0;
  margin: 0;
  margin-bottom: 10px;
}

.about__text-question {
  display: inline-block;
  width: 16px;
  height: 16px;
  font-size: 12px;
  line-height: 18px;
  border-radius: 50%;
  text-align: center;
  background: #fe7338;
}

.about__list {
  width: 500px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: 36px;
  color: #ffffff;
  font-size: 16px;
  line-height: 22px;
}

.about__item {
  width: 170px;
  margin-right: 155px;
  margin-bottom: 45px;
}

.about__item--background1 {
  background-image: url("https://svgshare.com/i/FVB.svg");
  background-size: 113px 92px;
  background-repeat: no-repeat;
  background-position: top -10px left -10px;
}

.about__item:nth-child(even) {
  margin-right: 0;
}

.about__item-big {
  font-size: 48px;
  line-height: normal;
  font-weight: bold;
}

.about__item-middle {
  font-size: 20px;
  line-height: 24px;
  font-weight: bold;
}

введите сюда описание изображения

1 ответ 1

0

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

Так же рекомендую, к примеру, оранжевые фигуры вставлять через пвсевдоэлемент (before/after) и тогда не придется заморачиваться с обрезанием картинки по краям и позиционированием бэграунда через свойство background-position.

Пример

5
  • С картинкой из трёх svg не очень понятно как сделать бэкграундом, т.к. видно, что картинка выходит из блока, а бэкграунд этого не умеет.
    – Alexey
    14 окт 2019 в 6:13
  • И ещё такой момент, что если вместо тега <body> будет тег <main>, тогда для псевдоэлемента z-index: -1 не сработает.
    – Alexey
    14 окт 2019 в 7:06
  • Не до конца понял, по поводу бэкграундов. У вас есть 4 оранжевых фигуры, одна фиолетовая и техника. Для вас это 6 разных изображений. Достаете их из макета и позиционируете как вам требуется. По поводу z-index. В вашем случае, если вы заменили на codepen body на main, то просто для псевдоэлемента делаете z-index: 0, а для текста, которорый обернут в спан добавляете position: relative и z-index: 1. В общем здесь с z-index'ом можно поиграться. Тут никаких проблем быть не должно. 14 окт 2019 в 15:45
  • Это я наверное не до конца понял, бэкграунд техники как псевдоэлемент делать (как и оранжевые фигуры)? И кстати техника состоит из трех SVG изображений.
    – Alexey
    14 окт 2019 в 15:56
  • Можете сделать через псевдожлемент. Можете через тег img и абсолютно спозиционировав его. Тут уже как вам будет удобнее. Просто эти самые три части объедините в одну картинку и используете. 14 окт 2019 в 16:15

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.