我正在尝试使用简单的背景颜色和div上的一些文本创建一个div。 我想减少这个div的背景颜色的不透明度,但是当我这样做时,div上文本的不透明度也会发生变化。 有没有办法只改变背景颜色的不透明度?
.main{ background-color: red; width: 100%; height: 200px; opacity: 0.5; }<div class="main"> <p>Opacity of this text shouldn't be changed.</p> </div>I'm trying to create a div with a simple background color and some text on the div. I want to decrease the opacity of the background color of this div but when I do that the opacity of the text on the div is also getting changed. Is there a way to change the opacity of the background color only?
.main{ background-color: red; width: 100%; height: 200px; opacity: 0.5; }<div class="main"> <p>Opacity of this text shouldn't be changed.</p> </div>最满意答案
您可以使用颜色的alpha通道,如下所示,这是RGBA的第4个参数
rgba(255,0,0,0.1)/ * 10%不透明红/ rgba(255,0,0,0.4)/ 40%不透明红/ rgba(255,0,0,0.7)/ 70%不透明红/ rgba(255,0,0,1)/全不透明红* /
注意: Red第一个参数为255 ,其他为0 ,您可以将0-1的第4个参数更改为opacity
.main{ background-color: rgba(255,0,0,0.7); width: 100%; height: 200px; /*opacity: 0.5;*/ }<div class="main"> <p>Opacity of this text shouldn't be changed.</p> </div>You can use the alpha channel of the color as below which is a 4th argument in RGBA
rgba(255,0,0,0.1) /* 10% opaque red / rgba(255,0,0,0.4) / 40% opaque red / rgba(255,0,0,0.7) / 70% opaque red / rgba(255,0,0, 1) / full opaque red */
Note: Red will have 255 as first argument and others as 0 and you can change the 4th parameter from 0-1 for opacity
.main{ background-color: rgba(255,0,0,0.7); width: 100%; height: 200px; /*opacity: 0.5;*/ }<div class="main"> <p>Opacity of this text shouldn't be changed.</p> </div>
更多推荐
发布评论