您可能遇到的问题(基于查看选择器)是不透明度会影响父元素的所有子元素:
div
{
background: #000;
opacity: .4;
padding: 20px;
}
p
{
background: #f00;
opacity: 1;
}
http://jsfiddle.net/Kyle_/TK8Lq/ http://jsfiddle.net/Kyle_/TK8Lq/
但有一个解决方案!使用 rgba 背景值,您可以在任何您想要的地方获得透明度:)
div
{
background: rgba(0, 0, 0, 0.4);
/*opacity: .4;*/
padding: 20px;
}
p
{
background: rgba(255, 0, 0, 1);
/*opacity: 1;*/
}
http://jsfiddle.net/Kyle_/TK8Lq/1/ http://jsfiddle.net/Kyle_/TK8Lq/1/
对于文本,您可以使用相同的 rgba 代码,但设置为 CSS 的 color 属性:
color: rgba(255, 255, 255, 1);
但是您必须在所有内容上使用 rgba 才能使其正常工作,您必须删除所有父元素的不透明度。
http://jsfiddle.net/Kyle_/TK8Lq/2/ http://jsfiddle.net/Kyle_/TK8Lq/2/