CSSを使用したBlured背景画像

とにかく、画像を背景にぼかして表示するにはCSSがありますか？CSSを使用したBlured背景画像

2012-04-15 MSajjadi

あなたは常に新しい要素を導入し、幅広い 'テキストshadow'を適用することによって、それをシミュレートすることができます。しかし、私はそれが私がお勧めするものであるかどうかはわかりません... –

tryフィルタ：blur（5px）; '（-webkit、-msなどでも） – TecHunter

はい、あります。

body { 
    background: url(images/bg-solid.jpg) no-repeat; 
} 

#page-wrap { 
    background: url(images/bg-blurry.jpg) no-repeat fixed; 
    width: 500px; margin: 40px auto; 
}

To see the detailed tutorial click here

EDIT：あなたのようにSVGフィルターを使用することができ、画像のために

次の2つの異なる背景、シャープな色（メイン画像）と、別のぼやけた画像とのいずれかを使用することができます
<feGaussianBlur>要素は、ぼかし効果を作成するために使用されています：以下

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <defs> 
    <filter id="f1" x="0" y="0"> 
     <feGaussianBlur in="SourceGraphic" stdDeviation="15" /> 
    </filter> 
    </defs> 
    <rect width="90" height="90" stroke="green" stroke-width="3" 
    fill="yellow" filter="url(#f1)" /> 
</svg>

要素のid属性はフィルタ
の一意の名前を定義ぼかし効果が素子
で定義さで=「SourceGraphicと」部分は効果が素子全体のために作成されることを規定します
stdDeviation属性がぼやけ
の量を定義する要素のフィルタ属性が「F1」フィルタ

出典

2012-04-15 11:38:22 ALH

[Ericマイヤー]（http://meyerweb.com/eric/css/edge/complexspiral/glassy.html）。 –

私は1つのイメージを意味します。私はイメージがあり、それがぼやけて見えるようにしたい。 – MSajjadi

ありがとうございました。それは動作します... – MSajjadi

これはCSSでは実行できません。

サーバー側の言語を使用して画像を処理し、ぼやけた画像を生成してCSSの背景で使用する必要があります。

出典

2012-04-15 11:42:48 Starx

あなたのきれいな答えをお寄せいただきありがとうございます;） – MSajjadi

@MSajjadi、私はあなたが好きな場合は、PHPのソリューションを与えることで、私の答えをより良くすることができます。 – Starx

サーバサイドの影響がない限り可能です。 – ALH

はい、フィルタによって画像がぼやける方法があります。リンクについては、こちらをご覧ください。しかし、まだすべてのブラウザで正しく動作していません！そして私はそれらを背景イメージのために働かせる方法を見つけませんでした。

Check this

出典

2012-11-08 10:36:09

CSSを使用したBlured背景画像

答えて

関連する問題