0

とにかくCSS、特に背景のために、で画像をぼかす方法はありますか？

4

3 に答える 3

2

はいあります。
2つの異なる背景を使用できます。1つはシャープな色（メイン画像）で、もう1つはぼやけた画像です。 

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

詳細なチュートリアルを表示するには、ここをクリックしてください

編集：画像の場合、以下 の
ようにsvgフィルターを使用できます：要素はぼかし効果を作成するために使用されます：
<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属性は、フィルターの一意の名前を定義します
  • ぼかし効果は要素で定義されます
  • in = "SourceGraphic"部分は、要素全体に対してエフェクトが作成されることを定義します
  • stdDeviation属性は、ぼかしの量を定義します
  • 要素のfilter属性は、要素を「f1」フィルターにリンクします。
    詳細な説明については、ここを参照してください。
于 2012-04-15T11:38:22.437 に答える
1

はい、フィルターで画像をぼかす方法があります。リンクでそれらについてもっと読むことができます。ただし、まだすべてのブラウザで正しく機能するわけではありません。そして、背景画像でそれらを機能させる方法を見つけられませんでした。

これをチェックして

于 2012-11-08T10:36:09.230 に答える
0

これはCSSでは不可能です。

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

于 2012-04-15T11:42:48.980 に答える