如何重叠两个背景图像

Question

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>

我有两张背景图片，我希望第二张与第一张重叠，如下所示：

但是应用了某种透明度，结果是这样的：

这是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% ;
    }

我希望contact-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"
[...]

但是没用

Answer 1

你应该做一个容器，把它们放在里面，给它一个位置值：相对。将两张图片设置为绝对位置，这样你就可以自由地对它们进行重叠。

Answer 2

我认为这应该可以解决您的问题。如果有任何问题，请告诉我。请确保将您的图片用于代码

<button onclick="reloadMaths()"><i class="fa fa-play"></i></button>
<button onclick="clearInterval(countDown);"><i class="fa fa-stop"></i></button>

Answer 3

更改 url 和其他属性的顺序应该可以解决问题。

background-image 中的每个下一个值都放置在 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>