我正在使用以下 CSS 代码:
.rounded_box{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width:850px;
padding:15px;
background-color:#80C1FF;
margin:0 auto;
color: #0D2E47;
font-family: Arial,Helvetica,sans-serif;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
/* background-color:rgba(255,0,0,255); */
}
.rounded_box h1{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
我想让 h1 和其他元素不透明,它们在 div 中具有类 rounded_box 。但也使 h1 和其他我不想要的元素透明。
那么有什么解决办法呢?
最佳答案
.rounded_box
中的 opacity: 0.6
将应用于所有子元素(因此 .rounded_box h1
。因此 h1
opacity:1.0
实际上只是父级的 100% (0.6)。
你可以做的是使用 rgba
定义 .rounded_box
的背景颜色,这不会影响 child 。
关于CSS不透明度,如何在透明容器元素中包含不透明元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8184412/