不透明度的CSS亮度

Question

所以我有一个div，在那个div我有一个按钮和一个文本框。 div我设置的不透明度为0.5。好的，但是我不希望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;}

这是我到目前为止所以你可以看到我的意思。

Answer 1

如果您有图片，可以使用: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%;
    }

Answer 2

在这种情况下，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;
}