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

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，顺序很重要，除非您手动更改它）。 然后，让孩子们绝对定位，并填满整个父母。

 
 
 I'm in the background. 
 
 
Important stuff!
 Yup. 
  

和

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