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

CSS 不透明度的亮度

CSS Brightness on opacity

html

css

division

opacity

brightness