Html 如何使一个div成为另一个div的背景

最初的想法是用这种风格制作一个div：

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

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

然而，我发现rgba只受较新浏览器的支持 我想知道如何使用这种风格的div制作“rgba”背景：

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

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

当我把它放在这里的时候，这个div没有显示…：(

---

有更好的方法吗？

您可以通过设置实际宽度和高度（而不是100%）使div可见：

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

---

在线演示：

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

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

内部div具有绝对位置，因为如果不更改，则放置在外部div中的任何内容都将受到或影响背景内部div

这是一把小提琴：

也可以将宽度和高度替换为：

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

---

但是宽度和高度是较少的属性。

A

div

默认具有

display:block

，因此您无需添加该属性。父集合的维度是否为？您可能希望在此处查找跨浏览器css不透明度：定义“更新”浏览器…

rgba

适用于Firefox 3+、Safari 2+、Opera 10+和所有版本的Chrome。如果您包含适用于IE8和IE9+的IE语法，它甚至适用于IE8+。您需要支持哪些浏览器？IE7+、Chrome、Safari和Firefox（几乎所有版本都支持）.IE7+似乎是我的问题您的想法奏效了，但是现在内部div比外部div大。您可以发布一个jsFiddle，以便我们更好地看到您遇到的问题。我解决了这个问题；我最初忽略了“position:relative；”属性，因为这是默认值，但我更改了它。