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

How to Apply Transparent Background Color to Division Without Using Opacity Property

如您所知 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 中添加了一个新示例。它使用混合模式 属性,我只能应用图像。

我认为您要查找的是 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" />

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