Использование SVG в качестве фона для определенной части веб-сайта

#html #css #svg #frontend

#HTML #css #svg #интерфейс

Вопрос:

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

Это изображение

Я написал код, который не сработал.

 .icons_and_text {  
  margin-top: 100px;  
  position: relative;  
 }  

.icons_and_text::before {  
  content: '';  
  background-image: url('./images/bg-curvy-desktop.svg');  
  background-size: cover;  
  position: absolute;  
  top: -600px;  
  left: 10;  
  height: 400px;  
  width: 100%;  
 }

Я ищу ответы, которые позволили бы мне решить проблему самостоятельно в следующий раз, спасибо.

1. изменить имя класса этот тип имени классов не работает, поэтому измените .icons_and_text на .icons_and_text , а затем попробуйте

2. Извините, имя класса правильное, кажется, это была ошибка при копировании.

3. брат этот тип класса, не рис какой-либо стиль

4. Я отредактировал его, в моем коде имя класса является правильным. При копировании его в StackOverflow он добавил /

5. хорошо! можете ли вы показать свой код в виде фрагмента кода или codepan

Ответ №1:

Надеюсь, это сработает для вас

 header .container {
    position: relative;
    z-index: 1;
}

1. Поскольку фон темный, элемент просто полностью исчезает. Действительно думал, что z-index также будет работать. Однако они не одного цвета, просто небольшие различия в оттенках, достаточные для появления. Я опубликую весь код заголовка в code pen вместе со ссылкой svg.

2. Ссылка на Codepen: codepen.io/carrickkv2/pen/gOMBmWo Ссылка SVG: drive.google.com/file/d/1w5ZPaiXdspRFwU_BBtEUAgxs-Z-feo2p /…

3. в чем проблема с приведенным выше ответом?

4. z-index скрывает элемент. Тем не менее, я думаю, что нашел решение, поэтому я вставлю его.

Ответ №2:

Кажется, это работает, хотя это не совсем то, что я хочу. То, что я хочу, — это идеальный способ позиционирования изображения.

 header.header {
    background-color: hsl(217, 28%, 15%);
    background-image: url(../images/bg-curvy-desktop.svg);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% 23rem;
}