Question

我正在尝试仅在导航opacity上设置background，但它适用于所有内部divs徽标和导航，但我不想申请{{1} }到徽标opacity。

我怎样才能做到这一点？我正在使用这样的代码：

HTML

background

Answer 1

嗨，请使用仅产生背景不透明度的rgba背景

.outer {
 background:rgba(0,0,0,0.5);
}

Answer 2

如果设置元素的不透明度，它将应用于它包含的所有元素。您也可以给它们一个不透明度，但它将是0和父级不透明度之间的相对值，如下所示： http://jsfiddle.net/hLw2c/

换句话说，它不可能这样做：

<div class="outer">YO<div class="inner">Zippazip</div></div>    

.outer {
    opacity: 0.5;
    background-color: red;
}

.inner {
    opacity: 1;
    background-color: blue;
}

一种可能的解决方法是使用伪元素伪造背景，如下所示： http://jsfiddle.net/hLw2c/1/

<div class="outer">YO<div class="inner">Zippazip</div></div>    

.outer {
    position: relative;
}
.outer:before {
    position: absolute;
    display: block;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.3;
    background-color: red;
    z-index: -1;
}

.inner {
    opacity: 1;
    background-color: blue;
}

现在，标题本身是完全不透明的，并且没有背景。背景由:before伪元素构成。这可以是半透明的，而不会影响标题的其他内容，因为该内容不在伪元素内。

Answer 3

您应该使用不透明度背景保存png（例如80％），并仅更改所需div的背景。这就是我想的全部！

示例：

div#navigation {background: url('/src/image.png') center center repeat;}

在这种情况下，具有不透明度的png适用于元素背景，并且所有otrher（文本等）都是完全可见的。图片示例：http://jacekkowalewski.com/images/black85.png

或者添加CSS rgba背景样式：

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

Answer 4

如果您的背景是彩色（不是图片），那么您可以使用rgba代替hash来提供颜色：background-color: rgba(200,100,200,0.5)（最后一个数字是从0到1的不透明度）

Answer 5

<div class="navigation">
        <div class="logo"> logo image here  </div>
        <nav> navigation code here </nav>
    </div>

.navigation{
  opacity:0.6;
}
.navigation #logo{
  opacity:1.0;
}

不透明度适用于所有内在的div

5 个答案: