html - 如何在不使用不透明度属性的情况下将透明背景颜色应用于分区

Question

如您所知，CSS 不透明度属性使背景颜色或图像透明。您可以在下面看到不透明度属性、背景颜色:rgba 和混合模式属性之间差异的示例。

div {
  display:inline-block;
  width:100px;
  height:100px;
}

#sample1 {
  background-color: rgb(221,51,85);
  opacity:0.4;
}

#sample2 {
  background-color:rgba(221,51,85,0.4);
}

#sample3 {
  background-color:rgb(221,51,85);
}

#sample4 {
  background-image: url(https://static.seattletimes.com/wp-content/uploads/2014/11/MattDay_Web-100x100.jpg);
  background-color: rgba(221,51,85);
  background-blend-mode: multiply;
  color:#fff;
}

div h3 {
  text-align:center;
}

<div id='sample1'>
  <h3>Sample 1</h3>
    <p>I'm NOT Original Color</p>
</div>

<div id='sample2'>
  <h3>Sample 2</h3>
  <p>I'm NOT Original Color</p>
</div>

<div id='sample3'>
  <h3>Sample 3</h3>
  <p>I'm Original Color</p>
</div>

<div id='sample4'>
  <h4>Sample 4</h4>
  <p>I'm Original Color</p>
</div>

在第一个示例中，不透明度适用于 div 中的所有元素。在第二个示例中，不透明度仅适用于背景色。在第三个示例中，背景颜色使用原始颜色。在第四个示例中，混合模式应用背景图像而不是背景颜色

如何在不使用不透明度或 rgba 的情况下透明背景，并且它不应该丢失原始颜色。

在不丢失原始颜色的情况下使用透明度示例；

编辑

我还在代码片段示例 4 中添加了一个新示例。它使用混合模式属性，我只能应用图像。

Answer 1

我认为您正在寻找的是 mix-blend-mode 属性。

您可以在 this page 中阅读更多关于它以及它与不同浏览器的兼容性的信息。 .这是一个示例(在 Chrome 上测试过):

div {
  background-color: #d35;
  display: inline-block;
  width: 150px;
  height: 150px;
  position: absolute;
  top: 20px;
  left: 40px;
}

img {
  mix-blend-mode: multiply;
}

<div></div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcThfH4SD1Kod8gzTIO0WtldPqlDacHt2NLm5itWUPf7AHdbo9_2Dg" />