3

我对 html 功能的工作感到困惑opacity......假设有两个divs，一个在另一个内部，并且我应用于opacity外部 div，它也会自动将不透明度应用于内部div。我们如何才能撤消它，就像 opacity 应该只适用于 external div？

我使用了 css 代码不透明度 http://jsfiddle.net/4uMdj/

4

5 回答 5

3

如果您background-color在外部 DIV 中使用，那么您可以rgba为其定义值。像这样写：

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

& 为 IE 使用 IE 过滤器

您可以从这里为 IE 生成 rgba 过滤器http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/

于 2012-08-01T11:04:09.747 回答
1 
.parent{
    position: relative;
}

.parent:before {
    z-index: -1;
    content: '';
    position: absolute;

    opacity: 0.3;
    width: xxpx;
    height: xxpx;
    background: ; 
}

.child{
    Color:xx;
}
于 2012-08-01T11:03:33.570 回答
1

如果您只是设置颜色更容易和更安全地使用背景不透明度，这不会影响任何嵌套元素

.alpha
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
}
于 2012-08-01T11:03:55.523 回答
1

如果你使用 css，你可以使用 rgba，但你必须覆盖子元素的背景，否则它将从父 div 继承：jsfiddle 示例

示例中的CSS：

.opacity {
    background-color: rgba(0,150,0,0.2);
    padding: 20px;
    border: 1px solid #000;
}
.noopacity {
    border: 1px solid #000;
    background-color: #090; /*non alpha background*/
    padding: 20px;
}

跨浏览器有效的最简单方法是使用您需要的颜色和透明度创建一个 1px PNG 文件，并使用以下 css：

.opacity {
    background: url("path/to/your/1px/transparent/background/image.png");
}

因为图像不会被用作继承背景；）

（注意：IE6默认不支持PNG透明！）

于 2012-08-01T11:40:59.713 回答
0

如果您在opacity其父元素上使用应用，则无法撤消（增加）嵌套元素的不透明度。

尝试改用background: rgba(r,g,b, opacity)：这不会对嵌套元素应用不透明度

于 2012-08-01T11:03:01.750 回答