Css 如何制作透明的两个div

我需要制作一个div，例如不透明度：0.5，它的内部是另一个div，它是不透明的。我想不出来。即使我将内部div的z-index设置为高于外部div，它仍然是透明的。现在我得到的是这样的：

<div id="outter" style="opacity:0.5; z-index:-1">
    <div id="inner" style="opacity:1; z-index:1">
        <img src="someImg.jpg" />
    </div>
</div>

---

不透明性

由所有子项继承，因此在这种情况下它没有多大用处。更好的选择是使用

rgba

颜色。例如，您可以将外部div的颜色设置为

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

。。。等等

---

如果您决定坚持使用

不透明度

，唯一的其他选项是将内部div放置在容器外部，并将其重新定位在

.outer

div的顶部。（您需要使用

position:relative

将它们包装在另一个容器中，然后将内部div绝对地相对于它放置。）

不透明度

由所有子级继承，因此在这种情况下不太有用。更好的选择是使用

rgba

颜色。例如，您可以将外部div的颜色设置为

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

……等等

如果您决定坚持使用

不透明度

，唯一的其他选项是将内部div放置在容器外部，并将其重新定位在

.outer

div的顶部。（您需要用

position:relative

将它们包装在另一个容器中，然后将内部div相对于它绝对定位。）

试试这个

<div id="outter" style="background-color: rgba(255, 255, 255, 0.5);">
    <div id="inner" style="opacity:1; z-index:1">
        <img src="Your image" />
    </div>
</div>

试试这个

<div id="outter" style="background-color: rgba(255, 255, 255, 0.5);">
    <div id="inner" style="opacity:1; z-index:1">
        <img src="Your image" />
    </div>
</div>

---

不透明度继承非常挑剔。您可以尝试绕过它，或者在

#outer

上使用

rgba（）

（删除不透明度和z索引）

比如：

#outter{背景：rgba（0,0,0,0.5）}

---

不透明度继承非常挑剔。您可以尝试绕过它，或者在

#outer

上使用

rgba（）

（删除不透明度和z索引）

比如：

#outter{背景：rgba（0,0,0,0.5）}