向背景圖像添加深色疊加層

Question

我看過幾個關於這個的 SO 帖子：我想通過添加疊加層來使當前背景圖像變暗。

 #header1 { background: url("http://lorempixel.com/image_output/cats-qc-640-480-10.jpg"); background-position:center center; position: relative; background-size: cover; padding-bottom:5em; }.overlay { background-color: rgba(0, 0, 0, 0.7); top: 0; left: 0; width: 100%; height: 100%; position: relative; z-index: 1; }

 <div class="header"> <div class="overlay"> <div class="jumbotron" id="header1"> <h1>Hello</h1> </div> </div> </div>

也許我不明白如何使用 z-index，或者我在這里遺漏了一些東西。 用於着色的深色背景未顯示。 任何指針？

Answer 1

使用線性漸變

要使背景變暗，請參閱此代碼筆和此鏈接

<div class="bg-img"></div>

.bg-img {
  width: 100%;
  height: 100%;
  background: url('http://alexcarpenter.me/img/banner.jpg') center center no-repeat;
  background-size: cover;

  &:before {
    content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-image: linear-gradient(to bottom right,#002f4b,#dc4225);
        opacity: .6; 
  }
}

Answer 2

 #header1 { background: url("https://www.random.org/analysis/randbitmap-rdo.png");/*Random image I grabbed*/ background-size: cover; } h1 { color: white; background-color: rgba(0, 0, 0, 0.7); padding-top: 10px; padding-bottom: 100px; padding-left: 20px; padding-right: 20px; }

 <div class="header"> <div class="overlay"> <div class="jumbotron" id="header1"> <h1>Hello</h1> </div> </div> </div>

正如預期的那樣，h1 作為一個額外的可視層，它的填充覆蓋了#header1。

第二種解決方案是將原始背景圖像添加到 .header 並將 h1 中的樣式賦予 #overlay 並進行一些調整，這也應該可以解決問題。

還有另一種可能的解決方案（類似於第二個），您可以將背景圖像添加到疊加層，並使用我給#header1 或 .jumbotron 的示例中的 h1 樣式

除了第一個解決方案之外，您應該能夠通過添加背景顏色來添加額外的圖層：疊加。 我不確定它會如何影響背景，但我猜它應該只是添加一層額外的顏色。

這是我使用此技術的個人示例。

例子

Answer 3

z-index 屬性指定元素的堆棧順序。 具有較大堆棧順序的元素始終位於具有較低堆棧順序的元素之前。 對於您的答案，您可以訪問css-tricks

Answer 4

我猜你想完全隱藏背景圖像，那么你需要在 rgba(0,0,0,1) 中將 alpha 的值設置為 1

0.7 定義了您需要顯示特定元素的透明度級別。

下面的鏈接用很好的例子解釋了覆蓋的概念

http://tympanus.net/codrops/2013/11/07/css-overlay-techniques/

Answer 5

#header1 {
background: url("https://www.random.org/analysis/randbitmap-rdo.png");/*Random image I grabbed*/,
box-shadow: "0px 4px 4px 0px #00000040,inset 0 0 0 1000px rgba(0,0,0,.5)"
}

如果添加框陰影，則不需要覆蓋。 內部框陰影用作疊加層。 您可以通過向上或向下更改 0.5 來調整不透明度。

Answer 6

您也可以使用這個 CSS：

filter: brightness(50%);