2016-05-19 8 views
0

をぼかすことができません:は、私はそれに関連付けられている、このCSSコードで非常に単純なHTMLページを設定したCSSの背景

html { 
    background: url("photourl") no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 

    -webkit-filter: blur(5px); 
    -moz-filter: blur(5px); 
    -o-filter: blur(5px); 
    -ms-filter: blur(5px); 
    filter: blur(5px); 
} 

しかし、それはぼやけていません。私はthisの例を見て、代わりにdivタグでそれをやろうとしましたが、私はここで推論していません。なぜ私が掲載したコードは動作しませんでしたか?

+0

http://stackoverflow.com/questions/13168142/is-it-possible-to-use-webkit-filter-blur-onバックグラウンド画像 – sinisake

答えて

4

ボディを使用してフィルタをアクティブにし(Firefoxでも)、背景をHTMLに設定する必要があります。これは、ドキュメントのすべての可視コンテンツを保持すると思われるタグであるボディによって描画されます。

背景を本体またはHTMLに設定すると、デフォルトでHTMLに描画され、ほとんどのブラウザではフィルタが有効になりません。 下のスニペットを実行し、htmlの背景を解除して何が起こるかを確認するには、その上にスニペットを移動します。

空のドキュメントでテストする場合は、高さをbodyに設定する必要があります。それ以外の場合はbodyは設定されていません。

https://www.w3.org/TR/css3-background/#special-backgrounds

body { 
 
    background: url("http://dummyimage.com/640x480") no-repeat center center fixed; 
 
    background-size: cover; 
 
    min-height: 100vh; 
 
    -webkit-filter: blur(5px); 
 
    -moz-filter: blur(5px); 
 
     -o-filter: blur(5px); 
 
      filter: blur(5px); 
 
} 
 
html { 
 
    background: white; 
 
} 
 
/* see what happens when bg is not set also on HTML */ 
 
html:hover { 
 
    background:none; 
 
}

-1
<!DOCTYPE html> 
<html> 
<head> 
    <title>Stack </title> 
    <style> 
    div { 
     height:500px; 
     width: 100%; 
    background: url("https://udemy-images.udemy.com/course/750x422/394968_538b_5.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 

    -webkit-filter: blur(5px); 
    -moz-filter: blur(5px); 
    -o-filter: blur(5px); 
    -ms-filter: blur(5px); 
    filter: blur(5px); 
} 
    </style> 
</head> 
<body> 
<div> 

</div> 
Some Text 
</body> 
</html> 

私はこれを試しても問題ありません。

関連する問題