背景圖像未全屏顯示

我想在後臺顯示完整圖像。但！它顯示出非常奇怪的行爲。背景圖像未全屏顯示

它只佔我屏幕的60％。屏幕的其餘部分採用白色。但是，當我定義不透明屬性時，這種不透明度僅適用於40％屏幕的其餘部分，並且圖像開始以不透明效果顯示（但僅在此40％屏幕中）。 ..

我GOOGLE了很多次，並應用了很多css技巧，但它並沒有採用不透明的全屏。 ..

請幫助我！

CSS：

html, body { 
    height:100%; 
} 

body{ 
    background: url(../..//images/background_pic.jpg) center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    opacity: 0.8; 
}

來源

2016-07-27 bc110402307 Syed Zeeshan Haide

我發現這種方式來解決您的問題。檢查this JSFiddle。

風格：

html, body { 
} 
.parent{ 
    position:relative; 
} 
.background{ 
    position:absolute; 
    background: url(http://farm6.static.flickr.com/5182/5613127636_e854aea66b_o.png) no-repeat center center fixed; 
    width: 100%; 
    height:100%; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    opacity: 0.3; 
} 
.foreground{ 
    position:relative; 
}

HTML：

<div class="parent"> 
    <div class="background"></div> 
    <div class="foreground"> 
    Put text here. 
    </div> 
</div>

來源

2016-07-28 19:49:54

應用背景，以HTML，而不是身體。

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

來源

2016-07-27 20:02:45

我已經試過了。這對我有用！但今天我的形象突然停止顯示這個伎倆。這就是爲什麼，我迷惑 –

也，當我的目標是HTML而不是身體，圖像開始顯示在我的網頁的一些區域 –

背景圖像未全屏顯示

回答

相關問題