section.contact {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

section.contact {
  background-image: url('https://svgshare.com/i/XxP.svg'), url('https://svgshare.com/i/Xwg.svg');
  background-position: bottom, top right;
  background-position-y: bottom, 20px;
  background-size: 100%, 40%;
  background-repeat: no-repeat;
}
<section class="contact">
</section>

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

enter image description here

Но вместо этого применяется какая-то прозрачность, заканчивающаяся так:

enter image description here

Это код css:

section.contact {
      background-image: url('/assets/contact/contact-bg.svg'), url('/assets/contact/contact-img.svg');
      background-position: bottom, top right;
      background-size: 100%, 40% ;
    }

Я хочу, чтобы контакт-IMG.SVG изображения перекрывать изображение Contact-BG.SVG.

Файл Contact-Img.svg начинается так:

<svg width="233" height="158" viewBox="0 0 233 158" fill="none" 
  xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" clip-rule=[...]

Я пытался добавить fill-opacity="1", как это:

<svg width="233" height="158" viewBox="0 0 233 158" fill="none" fill-opacity="1"
  xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd"
[...]

Но это не сработало

0
opensas 7 Июн 2021 в 16:11

3 ответа

Лучший ответ

Изменение порядка URL и других свойств должно сделать трюк.

Каждое следующее значение в background-image размещено ниже предыдущего в z оси z, и первое изображение имеет непрозрачность, поэтому я выгляжу так, будто она смешана друг с другом.

section.contact {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

section.contact {
  background-image: url(https://svgshare.com/i/Xwg.svg), url(https://svgshare.com/i/XxP.svg);
  background-position: top right, bottom;
  background-position-y: 20px, bottom;
  background-size: 40%, 100%;
  background-repeat: no-repeat;
}
<section class="contact">
</section>
0
ciekals11 7 Июн 2021 в 13:56

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

0
Fredrich 7 Июн 2021 в 13:21

<Сильно> Я думаю, что это должно решить вашу проблему. Дайте мне знать, если есть какие-либо проблемы с этим. Обязательно используйте свои изображения для кода

 .under {
 position: absolute;
 left: 0px;
 top: 0px;
 z-index: -1;
 }

 .over {
 position: absolute;
 left: 40px;
 top: 10px;
 z-index: -1;
 }
 
 <img src="https://tafttest.com/184x46.png" width="184" height="46" class="under" />
 <img src="https://tafttest.com/100x84.png" width="100" height="84" class="over" />
0
Nirmani Warakaulla 7 Июн 2021 в 13:28