减少父div中背景图像的不透明度而不影响子元素？ （Twitter Bootsrap）

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