html - 在不影响子元素的情况下降低父 div 中背景图像的不透明度？ (推特 Bootstrap )

Question

我一直在使用 Twitter Bootstrap 来完善网站的外观。我的 html 代码示例是:

<div class = 'container-fluid bg-1'>
            <div id ='yield_wrap'>
                <div id = 'field-wrap' style = 'height:40px;'>
                    <div class='form-groups'>
                        <input autocomplete='off' autofocus class='form-control' name='yield' placeholder='yield' type='text'/>
                    </div>
                </div>
            </div>
        </div>

可以看出，这里的父 div 是 'container-fluid bg-1'，其中 bg-1 与通过以下 CSS 优化的背景图像相关:

.bg-1{  
    background: url("https://loonylabs.files.wordpress.com/2014/08/peptides.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    opacity:0.9; 
}

但是，当设置此图像的不透明度时，它似乎也会影响容器 div 内的所有子元素——这不是我想要的。我已经广泛寻找一种方法来阻止这种情况的发生(这似乎是一个相当普遍的问题)但是，我找不到任何对我的情况真正有效的方法。我觉得可以使用伪 div，但我不确定如何让它工作。我知道这似乎是一个相当微不足道的问题，但我们将不胜感激任何建议/提示。

Answer 1

是的，你可以为此使用伪元素:

.bg-1 {
  position: relative;
}
.bg-1:after {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 40px;
  content: '';
  z-index: -1;
  background: url("https://loonylabs.files.wordpress.com/2014/08/peptides.jpg") no-repeat;
  background-size: cover;
  opacity: 0.5;
}

CODEPEN