如何在CSS中使背景圖像變暗？

我有一個引導程序jumbotron，我想讓它的背景變暗而不觸及輸入的文本。有沒有辦法做這樣的事情？如何在CSS中使背景圖像變暗？

我看到處處都是，但是我發現所有解決方案都使文本變暗。

我到目前爲止有：

.mainJumbotron { 
 
    margin: 0px; 
 
    height: 250px; 
 
    text-align: center; 
 
    background-image: url(http://i.imgur.com/qj2w73W.png); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
}

<div class="jumbotron mainJumbotron"> 
 
    <h1 style="">Hakkımızda</h1> 
 
</div>

來源

2016-04-03 Ege Kaan Gürkan

我們需要看代碼 – dippas

好吧，只需一秒鐘。 –

你走了。我已經添加了代碼。 –

嘗試這樣的事情：

在您的jumbotron課程，如果它尚未存在，請將其添加到position:relative;以增加一點CSS。這將允許下一步被定位在該框內。

然後，添加一個:after僞元素。用以下CSS

.jumbotron:after { 
    content:""; 
    display:block; 
    width:100%; 
    height:100%; 
    background-color:rgba(0,0,0,0.5); 
    position:absolute; 
    top:0; 
    left:0; 
    z-index:1 /*Added this in the updated */ 
}

background-color陰影是由最終值控制的。 0.5是50％不透明度，提高到1或更低到0以獲得您想要的黑暗。

UPDATE有人指出，框內的任何東西都被新的僞元素覆蓋。這是一個便宜的修復。添加z-index:1;您:after alement，再加入低於

.jumbotron > * { 
    position:relative; 
    z-index:2; 
}

感謝到cale_b https://jsfiddle.net/e8c3ex0h/3/

來源

2016-04-03 18:44:19 ntgCleaner

也沒有工作：（ –

嘗試添加'z-index：1'或更高的'：after'，只是爲了看看它是否落後 – ntgCleaner

這不適合你認爲它確實如此：https://jsfiddle.net/e8c3ex0h/2/（我已經完成'之前'和'之後'，相同的結果。 –

你可以試試下面你CSS來看看你得到想要的結果

#element { 
-webkit-box-shadow: inset 0px 50px 100px 0px rgba(0, 0, 0, 1); 
-moz-box-shadow: inset 0px 50px 100px 0px rgba(0, 0, 0, 1); 
box-shadow: inset 0px 50px 100px 0px rgba(0, 0, 0, 1); 
}

來源

2016-04-03 18:41:30 RiaanV

不是我想要的東西：/ –

所以你想要一個覆蓋？ – RiaanV

我想讓背景圖片變暗一些，以便前面的文字可以清晰地讀取。 –

這是如何做到這一點：

body, h1 { 
 
    margin: 0; 
 
} 
 

 
.mainJumbotron { 
 
    margin: 0px; 
 
    height: 250px; 
 
    text-align: center; 
 
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
 
         url(http://i.imgur.com/qj2w73W.png); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    position: relative; 
 
} 
 

 
h1 { 
 
    color: #fff; 
 
}

<div class="jumbotron mainJumbotron"> 
 
    <h1 style="">Hakkımızda</h1> 
 
</div>

（見this Fiddle ）

來源

2016-04-03 18:53:31

如何在CSS中使背景圖像變暗？

回答

相關問題