Question

最初的想法是让这个风格有一个div：

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

但是，我发现只有较新的浏览器支持rgba 我想知道如何使用这种风格的div创建一个“rgba”-background：

display:block;
height:100%;
width:100%;
background-color: #000;
opacity:0.6;

当我离开时，这个div没有显示...... :(

有更好的方法吗？

Answer 1

您可以通过设置实际宽度和高度来显示div，而不是100％：

width: 500px;
height: 500px;
background-color: #000;
opacity: 0.6;

在线演示：http://jsfiddle.net/nEw2E/

Answer 2

我假设你想使用内部div作为外部div的背景颜色，因为你正在寻找最跨浏览器的背景不透明度。

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

基于CSS-Tricks的这篇文章：http://css-tricks.com/snippets/css/cross-browser-opacity/以及您正在寻找的实现，您想要使用此css：

.outer {
    border: 1px solid #000;
    width: 300px;
    height: 300px;
    position: relative;
}
.inner {
    background-color: green;
    width: 100%;
    height: 100%;
    position: absolute;
    /* IE 8 */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    /* IE 5-7 */
    filter: alpha(opacity=50);
    /* Netscape */
    -moz-opacity: 0.5;
    /* Safari 1.x */
    -khtml-opacity: 0.5;
    /* Good browsers */
    opacity: 0.5;
}

内部div具有绝对位置，因为如果您没有任何内容放置在外部div中，则会受到影响或影响背景内部div。

这是一个工作小提琴：http://jsfiddle.net/X8Asy/

您还可以使用以下方法替换宽度和高度：

top: 0;
bottom: 0;
left: 0;
right: 0;

但宽度和高度属性较少。

如何将div作为另一个div的背景

2 个答案: