将两个背景与两个 img 混合答案

【问题标题】：Blend two backgrounds with two imgs将两个背景与两个 img 混合
【发布时间】：2021-07-26 07:12:40
【问题描述】：

如何仅使用 css 混合父元素和子元素的两种背景：

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

这不起作用......

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

【问题讨论】：

混合混合模式不是背景混合模式

标签： html css background background-image background-blend-mode

【解决方案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>

【讨论】：