如何重叠两个背景图像

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

我希望联系人-img.svg 图像与联系人-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

你应该做一个容器，把它们放在里面，给它一个position: relative的值。将两张图片设为position: absolute，那么你就可以在重叠方面自由地对它们做任何事情了。

Answer 2

我想这应该可以解决您的问题。如果 this.Make 有任何问题请告诉我，请务必使用您的图片作为代码

 .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" />

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>

如何重叠两个背景图像

How to everlap two background images

html

css

svg

background

background-image