Question

我在容器div中有一个div。现在我想让内部最div的半透明显示身体背景图像。或者可以这样做吗？

为了让我的问题更加清晰，我使用绿色边框作为我想要定位的div。我希望这个div有点半透明，这样身体标签的背景只在这个div中可见。我认为z-index应该在这里使用，但我不知道如何

 .forum-column{
border: 2px solid green;
/*background-image: url(http://kenstonlocal.org/kenston/wp-content/uploads/2014/12/css_code.jpg);
background-size: cover;*/
background-color: rgb(35,35,35);
overflow: hidden;
height: 50px;
margin-bottom: 5px;

}

https://jsfiddle.net/jmann1622/hgm0gzs0/2/

我知道不透明度和rgba。但我的问题是我的目标（绿色边框）在另一个div（橙色边框）内，它本身位于另一个div（红色边框）内。现在我不希望任何其他div是透明的，只有绿色边框div。我希望这个（绿色边框div）是半透明的，以便可以看到body标签的天空图像。对不起，混乱，noob在这里

Answer 1

选项-1 ：使用css属性opacity:[0-1]

.forum-column{
   border: 2px solid green;
   /*background-image: url(http://kenstonlocal.org/kenston/wp-content/uploads/2014/12/css_code.jpg);
   background-size: cover;*/
   background-color: rgb(35,35,35);
   overflow: hidden;
   opacity:0.4;
   height: 50px;
   margin-bottom: 5px;
}

选项-2 ：使用rgba(red,green,blue,alpha)作为背景颜色，其中alpha为0-1并指定半透明度

.forum-column{
   border: 2px solid green;
   /*background-image: url(http://kenstonlocal.org/kenston/wp-content/uploads/2014/12/css_code.jpg);
   background-size: cover;*/
   background-color: rgba(35,35,35,0.4);
   overflow: hidden;
   height: 50px;
   margin-bottom: 5px;
}

Answer 2

对大多数浏览器使用rgba .. rgba（35,35,35，.8）最后一部分是0-1之间的数字，表示透明度等级。

Answer 3

只需使用rgba作为背景颜色。

.innerDiv {
  background-color: rgba(35, 35, 35, .5);
}

（alpha）的最后一个值可以介于0（100％透明）到1（100％不透明）之间。

这将使最里面的div透明，并且背景div将通过它保持可见。

希望它有所帮助。

如何使嵌套div半透明以显示body标签的背景图像？

3 个答案: