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

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