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

Question

这个问题已经在这里有了答案：

• 如何使用CSS为文本或图像提供透明背景？ 28个答案

我在容器div中有一个div。 现在，我想使最里面的divs半透明以显示物体的背景图像。 还是可以做到这一点？

为了使我的问题更清楚，我为要定位的div使用了绿色边框。 我希望该div稍微透明，以便body标签的背景仅在该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标签的天空图像。 抱歉给您带来混乱，菜鸟在这里

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);
}

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

这将使最里面的div透明，而背景div仍然可以通过它看到。

希望能帮助到你。