Question

想问一下如何改变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;
}

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

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

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

2 个答案: