Question

我在这里有这个网站：

我有一个不透明的导航框，导航框内的所有内容都有不透明度，我该如何解决这个问题？我在Windows 7上使用Chrome，如果这有任何区别的话。

.navigation{
    float:left;
    height:550px;
    width:300px;
    background:#000;
    margin-left:-6px;
    margin-top:100px;
    opacity:0.6;
    filter:alpha(opacity=60);
    border-radius: 0 10px 10px 0;
    box-shadow: 5px 0px 3px rgba(0,0,0,.5);
}

.navigation ul{
    list-style:none;
    padding-top:20px;
}

.navigation ul li{
    padding-bottom:20px;
}

.navigation ul li a{
    font-size:18px;
    text-decoration:none;
    color:#FFF;
    text-transform:uppercase;
    font-family:'Conv_Museo300-Regular';
}


.logo{
    text-align:center;
    padding-top:10px;
}

Answer 1

不透明度适用于元素及其所有子元素。

使用具有RGBA值的背景颜色。

  background: rgba(0,0,0,0.6);

Answer 2

从opacity移除.navigation规则，并将alpha子属性值添加到background-color。

Answer 3

你无法修复它，是opacity对元素及其所有内容的作用。

如果您想要将不透明度应用于background-color，则可以使用rgba（）值。

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

前三个值是此黑色中的颜色0,0,0，第四个值0.4是alpha通道=透明度级别。

如果你可以使用它，你可以检查这里的兼容性

<强> http://caniuse.com/css3-colors

CSS - 不透明背景，里面的一切都有不透明度

3 个答案: