CSSでのみ背景画像をぼかす方法

こんにちは、私は背景画像をぼかそうとしていますが、そうしていないと思います。それ以上の援助は、私のエネルギーを高めるでしょう。おかげCSSでのみ背景画像をぼかす方法

この私のCSS

html { 
    position: relative; 
    min-height: 100%; 
    max-width: 100%; 
    background: url(img/rsz_1spring.jpg); 
    background-repeat: no-repeat; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
max-width: 100%; 
    overflow-x: hidden; 

}

は、私はこれを適用しようとしていますが、それはすべて私のWebページには背景画像のみのinstaedぼかします。

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

ありがとうございます。

出典

2016-07-14 Tanmoy Sarkar

可能な複製背景画像]（http://stackoverflow.com/questions/20039765/how-to-apply-a-css-3-blur-filter-to-a-background-image） –

@TanmoySarkar上記のコメントのリンクを確認してください彼らがあなたのニーズに合っているかどうかを教えてください。 – RDardelet

@RDardelet私はこのリンクでこれを解決しようとしています。見てみましょう。 –

<html>にぼかしを適用すると、ウェブページがぼやけます。

<html>に背景を追加する代わりに<body>にある別の<div>をウェブページのサイズに合わせて作成し、それにぼかしを追加する必要があります。

例

body { 
 
    font-family: "Arial"; 
 
    color: #fff; 
 
} 
 

 
.page-bg { 
 
    background: url('http://www.planwallpaper.com/static/images/general-night-golden-gate-bridge-hd-wallpapers-golden-gate-bridge-wallpaper.jpg'); 
 
    -webkit-filter: blur(5px); 
 
    -moz-filter: blur(5px); 
 
    -o-filter: blur(5px); 
 
    -ms-filter: blur(5px); 
 
    filter: blur(5px); 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: -1; 
 
}

<h1> 
 
This is a title 
 
</h1> 
 

 
<div class="page-bg"> 
 
</div>

出典

2016-07-14 06:09:42 Kan412

@tympazzこれはすごく素晴らしいことに感謝します...これは私の疑問を解決します。 –

画像タグまたはイメージを含むDIVにIDまたはクラス属性を割り当て、その特定のイメージタグまたはイメージを含むDIVにCSSプロパティを割り当てます。あなたは明らかに全体のWebページをぼかすHTML全体をぼかしています。例えばのために

は：

<div class="image-container"><img class="blurred" src="..." /></div>

どちらかは、画像の容器に直接様またはdiv要素のイメージ画像にぼかし

.image-container, .blurred, .image-container>img { 
    -webkit-filter: blur(5px); 
    -moz-filter: blur(5px); 
    -o-filter: blur(5px); 
    -ms-filter: blur(5px); 
    filter: blur(5px); 
}

にCSS 3ぼかしフィルタを適用する方法[の

出典

2016-07-14 06:14:47

ありがとう皆さん、心からのお手伝いをしています。これは私の疑問や質問を解決します。 –

CSSでのみ背景画像をぼかす方法

答えて

関連する問題