背景图像未全屏显示

Question

我正在尝试在背景中显示完整图像。但！它表现出非常奇怪的行为。

它只占用了我屏幕的 60%。屏幕的其余部分采用白色。但是当我定义不透明度属性时，此不透明度仅适用于 40% 屏幕的其余部分，并且图像开始显示不透明度效果（但仅在这 40% 屏幕中）。 ..

我在谷歌上搜索了很多次并应用了很多 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

将背景应用到 html 而不是主体。

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

Answer 2

我发现这个方法可以解决你的问题。检查 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>

背景图像未全屏显示

Backgroung Image is not displaying on full screen

html

css

background-image