我正在尝试将不透明度重置为1.0,用于"演示文本4",其容器的不透明度设置为0.3.我读到我可以直接使用:color:rgba(255,255,0,1); 但这对我不起作用.有没有办法实现我的目标？
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#text_holder {
background: blue;
width: 500px;
height: 200px;
}
#text_holder2 {
background: blue;
width: 500px;
height: 200px;
color: rgba(255, 255, 0, 1);
}
#alpha_30 {
opacity: 0.3;
color: #ff0000;
}
#alpha_100 {
color: #ff0000;
}
</style>
</head>
<body>
<div id="alpha_100">
<div id="text_holder">
<p>Demo text 1</p>
</div>
</div>
<div id="alpha_30">
<div id="text_holder">
<p>Demo text 2</p>
</div>
</div>
<div id="alpha_30">
<div id="text_holder">
<p>Demo text 3</p>
</div>
<div id="text_holder2">
<p>Demo text 4</p>
</div>
</div>
</body>
</html>
G-C*_*Cyr 29
你不能.
如果你使用普通的背景颜色,那么请使用rgba代替.
#text_holder {
background:rgba(0, 0, 255,1);
width: 500px;
height: 200px;
}
#text_holder2 {
background: rgba(0, 0, 255,1);;
width: 500px;
height: 200px;
color: rgba(255, 255, 0, 1);
}
#alpha_30 > div {/* select child */
/*opacity: 0.3;*/
background:rgba(0, 0, 255,0.3);/* give opacity to bg color only */
color: #ff0000;
}
#alpha_100 {
color: #ff0000;
}
对于作为背景的图像,您可以使用rgba中的主背景颜色伪造不透明度.如果你想要背景的不透明度为0.3,那么做1 -0.3 = 0.7来设置你的rgba不透明度.
<div class="bg-img">
<p class="text_holder"> some text</p>
</div>
.bg-img {
background:url(http://lorempixel.com/100/100/abstract);
}
.bg-img .text_holder {
background:rgba(255,255,255,0.3);/* here white cause body as white background */
}
这些是解决方法:两者的DEMO(测试底部的bg图像):http://codepen.io/anon/pen/yGgpz
Kev*_*own 12
使用rgba(225, 0, 0, .3)父DIV.
Stack Snippets示例:
.opaque {
width: 500px;
height: 500px;
text-align: center;
color: black;
background: rgba(225, 0, 0, .5);
}<div class="opaque">This text is not opaque</div>