html - 将两个背景与两个 imgs 混合

Question

如何仅将父元素和子元素的两个背景与css混合：

<div style="background:url(img1.jpg);">
     <div style="background:url(img2.jpg); background-blend-mode:overlay;">
     </div>
</div>

这不起作用...

我想将 bg -> img2 与 bg -> img1 混合

Answer 1

您需要使用mix-blend-mode:overlay，它将每个背景与 alpha 通道混合

<div style="width:50%;height:100%;">
  Your initial one:
  <div style='background-image:url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png");height:5%'>
       <div style='background-image:url("https://amymhaddad.s3.amazonaws.com/oriental-tiles.png"); background-blend-mode:overlay;padding:25%;'>
       </div>
  </div>
  Correct Below:
  <div style='background-image:url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png");height:5%'>
       <div style='background-image:url("https://amymhaddad.s3.amazonaws.com/oriental-tiles.png"); mix-blend-mode:overlay;padding:25%;'>
       </div>
  </div>
  Just "blue":
<div style='background-image:url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png");padding:25%;height:5%'>
</div>
  Lastly, a test one using just "oriental-tiles":
<div style='background-image:url("https://amymhaddad.s3.amazonaws.com/oriental-tiles.png");padding:25%;height:5%'>
       </div>
</div>