Html 背景图像未全屏显示

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

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

我在谷歌上搜索了很多次，应用了很多css技巧，但它并没有全屏显示不透明度。

请帮帮我

css:

---

将背景应用于html而不是正文

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

---

我找到了解决你问题的办法。检查

风格：

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:

把文本放在这里。

我已经试过了。那对我有用！但今天，我的图像突然停止显示这个技巧。这就是为什么，我很困惑，当我把目标放在html而不是正文上时，图像开始显示在我页面的一些区域上

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;
}

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