Jquery 更改Jumbotron不透明度并使其全宽而不影响字体和按钮

想知道如何更改Jumbotron不透明度并使其全宽而不影响字体和按钮的不透明度吗

.jumbotron-special{
    text-align: center;
    background-attachment: scroll;
    background-image: image-url('header-bg.jpg');
    background-position: center center;
    background-repeat: none;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    // how to only make background-image-opacity: 0.3;
}

---

您可以在另一个元素中添加背景，并仅降低该元素的不透明度：

.jumbotron-special {
   position: relative;
}
.jumbotron-special:after {
    content : "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url('header-bg.jpg'); 
    width: 100%;
    height: 100%;
    opacity : 0.3;
    z-index: -1;
}

---

看下面的小提琴：

基本上，让一个父元素管理页面流，使其相对，并为后台创建一个子元素，为内容创建一个子元素（顺序因z-index而重要，除非您手动更改它）。然后，将子对象绝对定位，并填充整个父对象

<div class="jumbotron">
    <div class="bg">
        I'm in the background.
    </div>
    <div class="content">
        <h1>Important stuff!</h1>
        <button>Yup.</button>
    </div>
</div>

---

不知怎的，它不起作用了，jumbotron现在没有任何背景图像。它会受到其他代码的影响吗？

.jumbotron {
    width: 100%;
    height: 400px;
    position: relative;
}

.jumbotron .bg {
    opacity: 0.10;
    background-color: orange;
    position: absolute;
    width: 100%;
    height: 100%;
 }

.jumbotron .content {
    position: absolute;
    width: 100%;
    height: 100%;
}