CSS Opacity Box

Question

好的所以这是我的CSS样式表。

 #mainheader,#content{
    opacity:0.35;
    text-align:center;
    background-color:#000000;
    border-top-style:ridge;
    border-left-style:ridge;
    border-right-style:ridge;
    border-bottom-style:ridge;
}

正如你所看到的那样，它是一个透视的盒子，但是有一个小的黑色背景，使文字看起来很模糊。实施例。

http://i.stack.imgur.com/18dOZ.png

当我拿走那种背景色时，我会得到更清晰的文字......

http://i.stack.imgur.com/ixLva.png

好吧那么我想说的是我能写些什么来让那个文字上方的文字非常清晰，而不是它的黑暗不透明。

Answer 1

如果您想使用CSS3，请尝试：

background-color: rgba(0,0,0,0.35);

而不是opacity。

http://jsfiddle.net/vsZtM/

W3.org关于RGBA的参考文献：
http://www.w3.org/TR/2003/CR-css3-color-20030514/#rgba-color
http://www.w3.org/wiki/CSS3/Color/RGBA

Answer 2

使用Alpha通道更改容器的背景，而不是不透明度：

#mainheader,#content { 
background: rgba(0,0,0,0.35);
}

最后一个参数是不透明度。

Answer 3

不透明度会更改整个元素的不透明度，而background:rgba(0,0,0,.35)只会更改背景颜色。

Answer 4

您可以将background-color设置为rgba值，并在CSS语句中不要使用opacity。例如：

#mainheader,#content{
    text-align:center;
    background-color: rgba(0, 0, 0, .35);
    border-top-style:ridge;
    border-left-style:ridge;
    border-right-style:ridge;
    border-bottom-style:ridge;
}

这将使您的文字保持完全不透明，而您的背景是半透明的。但是，请注意，这在Internet Explorer 8及更低版本中不起作用 - 它将是一个坚实的背景。

Answer 5

您应该尝试使用rgba代替opacity，如下所示：

background-color: rgba(0,0,0,0.35);

注意：这是CSS3，只能在IE9及更高版本中使用，因此对于其他版本，你应该提供后备，如下所示：

background-color: #000;
background-color: rgba(0,0,0,0.35);