CSS不透明度，如何在透明容器元素中包含不透明元素
我正在使用以下 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 和其他元素作为不透明，位于具有类 rounded_box 的 div 内。但也使 h1 和其他元素透明，这是我不想要的。
那么有什么办法可以解决这个问题呢？
I am using following CSS code:
.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 */
}
And I want to have h1 and other elements as opaque that are inside div having class rounded_box . But is also making h1 and other elements transparent that I don't want.
So what can be the solution for this?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
.rounded_box中的opacity: 0.6将应用于所有子元素（因此是.rounded_box h1。因此h1opacity:1.0实际上只是父项的 100% (0.6)，您可以使用
rgba来定义 的背景颜色。.rounded_box，不会影响子项。The
opacity: 0.6in.rounded_boxwill be applied to all child elements (thus the.rounded_box h1. So theh1opacity:1.0is really only 100% of the parent (0.6).What you could do is use
rgbato define the background color of.rounded_box, which does not affect children.如果只是在圆角框元素上寻找透明背景，请使用以下代码：
If are only looking for a transparent background on the rounded box element, use the following code:
一个可行的技巧是将所有文本设置在绝对定位的 div 中，该 div 是您希望透明的容器的同级容器。将其绝对定位在容器上方，设置 Z 索引，并确保父元素相对定位。
A workable hack is to set all of your text within an absolute positioned div that is a sibling to the container you wish to be transparent. Position it absolutely over the container, set the Z index, and make sure your parent element is positioned relative.
基本上没有什么灵丹妙药可以解决这个问题。不幸的是，不透明度会继承到具有不透明度的元素的所有子元素，并且无法将不透明度设置为“120%”来克服父元素上的 80% 不透明度。
我的舒适区是有一个没有不透明度的包含 div，其中包含 2 个子 div：一个用于保存背景图像、圆角边缘、不透明度等；另一个用于保存背景图像、圆角边缘、不透明度等。及其兄弟姐妹来保存内容。我会使用 JavaScript 强制不透明 div 的高度为内容 div 的高度，然后我绝对会将内容 div 放置在不透明 div 之上。
或者
我只是使用 alpha 透明 PNG 作为圆角框的背景图像，假设我不必有条件地改变它们的颜色或任何东西。如果您愿意单独剪切顶部/底部/侧面/角落，您可以这样做，并且仍然可以容纳可变的宽度和高度。
Basically there's no magic bullet for this. Unfortunately, the opacity is inherited down to all children of an element with opacity, and there's no way to set opacity to "120%" to overcome 80% opacity on a parent element.
My comfort zone would be to have a containing div with no opacity, which holds 2 sub divs: one to hold the bg image, rounded edges, opacity, etc; and its sibling to hold the content. I'd use JavaScript to force the height of the opaque div to be the height of the content div, then I'd absolutely position the content div over the opaque one.
OR
I'd just use alpha transparent PNGs as the background image of the rounded box, assuming I didn't have to conditionally change their color or anything. You can do this and still accomodate variable widths and heights too, if you are willing to cut out the top/bottom/sides/corners separately.