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