0

Alright So here is my CSS style sheet.

 #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;
}

And as you can see it's a box that's see through, but has a small black background making text look fuzzy. Example.

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

When I take away that background color I get more clear text like this...

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

Alright So what i'm trying to say it what can I write to have that text above that box being very clear text and not with it's dark opacity.

4

5 回答 5

5

如果您想使用 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

于 2013-06-01T02:31:17.877 回答
3

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

于 2013-06-01T02:39:32.933 回答
3

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

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

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

于 2013-06-01T02:31:08.127 回答
2

您应该尝试使用rgba而不是opacity这样：

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

注意：这是 CSS3，只能在 IE9 及更高版本中工作，因此对于其他版本，您应该提供如下后备：

background-color: #000;
background-color: rgba(0,0,0,0.35);
于 2013-06-01T02:41:12.083 回答
2

您可以将 设置background-color为一个rgba值，并opacity在您的 CSS 语句中省略 。例如：

#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 及更低版本中不起作用——它将是一个坚实的背景。

于 2013-06-01T02:32:11.827 回答