不透明度上的CSS亮度[重复]答案

【问题标题】：CSS Brightness on opacity [duplicate]不透明度上的CSS亮度[重复]
【发布时间】：2015-08-28 20:45:48
【问题描述】：

所以我有一个 div，在那个 div 中我有一个按钮和一个文本框。我设置的不透明度为 0.5 的 div。好的完美，但是我不希望 div 中的所有内容都是透明的。如何使文本框和按钮全亮？

.bodybox {
    position:absolute;
    background-color: white;
    top: 160px;     
    width: 960px;
    height: 450px;
    z-index: 13;
    margin-left: 24.736842105263158%;
    margin-right: 24.736842105263158%;
    opacity: 0.1;}

这是我目前所拥有的，所以你可以明白我的意思。

【问题讨论】：

标签： html css opacity division brightness

【解决方案1】：

在这种情况下，rgba 帮助了我。替换背景值。

bodybox {
position:absolute;
background: rgba(255, 255, 255, 0.5);
top: 160px;     
width: 960px;
height: 450px;
z-index: 13;
margin-left: 24.736842105263158%;
margin-right: 24.736842105263158%;
opacity: 0.1;
}

【讨论】：

@nha 这怎么不试图回答这个问题？我们为什么要删除这个答案？它甚至没有反对票..
@James 抱歉，已删除并点赞。

【解决方案2】：

如果你有图片，你可以使用:after属性

.bodybox {
   position: relative;
}

.bodybox:after {
    content : "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(/wp-content/uploads/2010/11/tandem.jpg); 
    width: 100%;
    height: 100%;
    opacity : 0.2;
    z-index: -1;
}

或者，如果你只有背景色，你可以使用rgba:

.bodybox {
    position:absolute;
    background-color: rgba(255,255,255, 0.1)
    top: 160px;     
    width: 960px;
    height: 450px;
    z-index: 13;
    margin-left: 24.736842105263158%;
    margin-right: 24.736842105263158%;
    }

【讨论】：