背景图像未全屏显示

Question

我想在后台显示完整图像。但！它显示出非常奇怪的行为。

它只占我屏幕的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; 
} 

Answer 1

我发现这种方式来解决您的问题。检查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> 

Answer 2

应用背景，以HTML，而不是身体。

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