如何在不使用不透明度的情况下将透明背景颜色应用于分区 属性
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>
如您所知 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>