不透明的背景圖片，覆蓋整個屏幕

Question

一直在玩CSS，由於某種原因，我無法使圖像覆蓋整個屏幕。 我設法降低了opacity但是圖像無法覆蓋屏幕。

<div class="backgroundImage">
    <img src="Image/BackgroundImage.jpg">
</div>

---

.backgroundImage{
    opacity: 0.4;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

但是，如果我使用下面的代碼，則可以覆蓋整個屏幕，但opacity不會降低。 因此由於某種原因，它不適用於div。

html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Answer 1

您可以組合多個背景圖像並將它們堆疊在彼此之上。 但是，沒有辦法控制它們的不透明度。

    .backgroundImage {
    background-image: url('http://www.css3.info/wp-content/themes/new_css3/img/sheep.png'), url('http://lorempixel.com/300/400');
    background-position: center bottom, left top;
    -webkit-background-size: 80px 60px, cover;
    -moz-background-size: 80px 60px, cover;
    -o-background-size: 80px 60px, cover;
    background-size: 80px 60px, cover;
    background-repeat: repeat-x, no-repeat;
    width: 100%;
    height: 100vh;
}

您的情況下img標簽未關閉。 它看起來應該像這樣<img src="Image.jpg"> 。

此外，您不能使用background-size:指定img background-size:您應該使用width:和height:

Answer 2

您可以使用:before或:after CSS偽元素，並為其設置背景圖片+ opacity 。 您可以將所有內容設置為height:100% ，也可以直接在div上直接使用height:100vh ，以使其覆蓋整個視口高度。

Jsfiddle示例

 body { margin: 0; } .container { position: relative; height: 100vh; } .container:before { background: url("https://unsplash.it/500") center / cover; content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; opacity: 0.5; } 

 <div class="container">Yes!</div> 

Answer 3

這是一個演示： https : //jsfiddle.net/a1wvdpwc/17/我想這就是您想要的效果嗎？

只需將背景div的寬度和高度設置為100％，並將其位置固定即可。 然后給它一個非常低的Z索引，使其停留在最后面。 然后，您還需要為圖像提供100％的高度和寬度，以使其填滿視口。 （在演示中，我使用vh和vw；這表示視口寬度和視口高度，以百分比表示。）

演示也在scss中，但是唯一的區別是，放置在backgroundImage樣式內的css Img使用后代選擇器，因此它以div.backgroundImage的所有Img元素為目標。 我在此答案中輸入了已編譯的CSS外觀。

也對缺少縮進感到抱歉。 我在電話上打了。 我將在幾個小時內使用更整潔的版本對其進行更新。

的HTML是：

<div class="backgroundImage">
      <img src="http://lorempixel.com/image_output/city-q-c-640-480-6.jpg" />
</div>
<div class="content">
    Content here
</div>

CSS是：

.backgroundImage {
    Position:fixed;
    Top: 0;
    Bottom: 0;
    Width: 100vh;
    Height: 100vh;
    Opacity: 0.25;
    Z-index: -5000;
}

.backgroundImage img {
    width:100vw;
    height: 100vh;
}
.content {
    padding: 30px;
}

我也忘了補充（據我所知），這種方法對於語義來說並不是太好，但是如果您使用它的話也不應該太糟。