Question

好的，所以在我的页面中，我正在使用此css显示背景图片：

.heroarea {
    background:url(/static/images/mrd_hero_01.jpg) no-repeat;
    height:450px;
}

并且副本放在它上面，副本所在的容器具有以下样式：

.main-panel {
    position: absolute;
    top: 130px;
    left: 380px;
    background: #fff;
    width: 560px;
    height: 340px;
    padding: 30px 30px 20px 30px;
    /* CSS3 standard */
    opacity:0.5;
    /* for IE */
    filter:alpha(opacity=50);
}
.main-panel h1 {
    background: transparent;
    color:#39372f;
    text-align: center;
    /* CSS3 standard */
    opacity:1;
    /* for IE */
    filter:alpha(opacity=100);
}

一般来说，一切都如预期。也就是说，图像显示了我希望它显示的位置。主面板显示带有透明背景的白色背景。但是，h1标记中的文本也是透明的。我可以看到从下面显示的图像。我怎样才能使h1标签内容不透明？

谢谢！

Answer 1

不透明度适用于元素，而不是它的背景。

您需要使用半透明图像或rgba背景颜色。

有一个explanation about how to do this in a backwards compatible way。（披露：我的网站）

Answer 2

您必须将其移出.main-panel父级。没有办法覆盖那里应用的50％不透明度。

或者，如果您仅使用50％不透明度使mrd_hero_01.jpg背景图片透明，则可以将其转换为具有50％不透明度的.png，然后您就不需要设置不透明度.main-panel。

Answer 3

使用rgba和/或透明png。或者，将内容移动到单独的兄弟div作为背景：

<div id="parent">
   <div id="opacity"></div>
   <div id="child">text</div>
</div>

Answer 4

如果你对块元素使用透明度，它也会使子元素内部透明。这就是css的工作原理！我认为没有任何办法可以解决这个问题。您可以做什么来绝对定位h1而不会成为孩子或使用半透明图像

Answer 5

看起来你的文字是.main-panel的孩子。它将占据50％的不透明度。即使你声明文字是不透明度100％只会使它100％的50％。您需要将它层叠在.main-panel之外并将其放在最上面。

CSS：不透明度问题

5 个答案: