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

【问题标题】：Changing Jumbotron opacity and make it full width without affecting the font and button更改 Jumbotron 不透明度并使其全宽而不影响字体和按钮
【发布时间】：2015-01-15 17:07:00
【问题描述】：

想问一下如何在不影响字体和按钮不透明度的情况下改变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;
}

【问题讨论】：

标签： jquery html css

【解决方案1】：

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

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

【讨论】：

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

【解决方案2】：

请参阅以下小提琴：http://jsfiddle.net/7ak3b0f4/

基本上，让一个父元素管理页面流，使其相对，并为背景创建一个子元素，并为内容创建一个子元素（由于 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 {
    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%;
}

【讨论】：