如何在不使用不透明度属性的情况下将透明背景颜色应用于除法

Question

如您所知，CSS Opacity Property正在制作透明的背景颜色或图像。您可以看到样本低于不透明度属性，背景颜色：rgba和混合模式属性之间的差异。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

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

使用透明度样本而不会丢失原始颜色;

修改

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

Answer 1

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

您可以在this page中详细了解它及其与不同浏览器的兼容性。以下是一个示例（在Chrome上测试）：

＆＃13;

＆＃13;

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

img {
  mix-blend-mode: multiply;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

.solid {
background-image: url('http://res.cloudinary.com/sayob/image/upload/v1511882466/cat300x200_dq2ewf.jpg');
background-repeat: no-repeat;
width: 637px;
height: 306px;
z-index:1;
}
.transparent {
background-image: url('http://res.cloudinary.com/sayob/image/upload/v1527678168/Untitled3_vsdneg.png');
background-repeat: no-repeat;
width: 100px;
height: 100px;
position: absolute;
top: 40px;
left: 90px;
}

<div class="solid">
  <div class="transparent"></div>
</div>