バックグラウンド画像がフルスクリーンで表示されない

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

この方法で問題を解決しました。 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; 
}