Волновой фон сверху и снизу секции - PullRequest
Новая
       21

Волновой фон сверху и снизу секции

1 голос
/ 26 мая 2019

У меня есть раздел часто задаваемых вопросов, который я хотел бы, чтобы верхний раздел имел верхний волновой фон, а нижний раздел также имел волновой фон

Я бы хотел что-то подобное enter image description here

Вот что у меня есть

HTML 

<section id="faq">
  <div id="details">
  </div>
</section>

CSS 

#faq{
  background-image: url("wave-top.svg")
  background-repeat: no-repeat, repeat;
  background-color: blue;
}

Вот два изображения, которые у меня есть для фона

Верхняя волна enter image description here

Нижняя волна

enter image description here

Что мне нужно сделать, чтобы получить то, что я хочу?

Ответы [ 2 ]

2 голосов
/ 26 мая 2019

Использование нескольких фоновых изображений и настройка background-size / background-position: 

.box {
  padding:11% 0; /* The padding is the area for the shapes, adjust it based on the ratio of the shape*/
  height:100px; /* to illustrate the space for the content */
  background:
    url(https://i.stack.imgur.com/mG3Vb.png) top   /100% auto,
    url(https://i.stack.imgur.com/JSEyE.png) bottom/100% auto,
    linear-gradient(#387dff,#387dff) content-box; /* Color between the shapes only on the content and not the padding*/
  background-repeat:no-repeat;
}
<div class="box">
</div>
1 голос
/ 26 мая 2019

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

#faq {
  width: 100%;
  position: relative;
  padding: 40px 0; /* make the padding the same as the height of the pseudo elements*/
}

#faq:before {
  content: '';
  background: url('https://i.stack.imgur.com/mG3Vb.png');
  width: 100%;
  height: 40px; /*make the height the same as the height of the background image size*/
  background-size: 100% 100%;
  position: absolute;
  top: 0;
}

#faq:after {
  content: '';
  background: url('https://i.stack.imgur.com/JSEyE.png');
  width: 100%;
  height: 40px; /*make the height the same as the height of the background image size*/
  background-size: 100% 100%;
  position: absolute;
  bottom: 0;
}

#details-wrapper {
  background-color: #387dff;
  width: 100%
}

#details {
  width: 300px;
  margin: 0 auto;
  font-family: sans-serif;
  color: white;
  font-size: 16px;
}
<section id="faq">
  <div id="details-wrapper">
    <div id="details">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </div>
</section>

Редактировать

По предложению Темани Афифа я обновил фрагмент кода для использования background-size: 100% 100%; в отличие от background-size: 100% 40px;, тем самым удаляя другую переменную, которую нужно помнить для настройки

...