web-dev-qa-db-ja.com

CSSを介して画像をぼかしますか？

多くのスマートフォン（サムスンギャラクシーIIを例）では、フォトギャラリーを閲覧すると、そのぼやけたコピーがバックグラウンドでレイアウトされます。これはCSSによって動的に実現できますか（つまり、写真のコピーを事前に保存せずに）。画像をぼかすための複雑なCSS画像フィルターはありますか？

cssimageeffects
52
user776686

CSS3フィルター を使用できます。実装は比較的簡単ですが、現時点ではWebkitでのみサポートされています。ただし、Samsung Galaxy 2のブラウザーはWebkitブラウザーだと思うので、サポートする必要がありますか？

43
Andy

CSS3を使用すると、画像を簡単に調整できます。ただし、これによって画像が変更されることはありません。調整された画像のみを表示します。

詳細については、次のコードを参照してください。

画像をグレーにするには：

img {
 -webkit-filter: grayscale(100%);
}

セピア色の外観を与えるには：

img {
 -webkit-filter: sepia(100%);
}

明るさを調整するには：

img {
 -webkit-filter: brightness(50%);
}

コントラストを調整するには：

img {
 -webkit-filter: contrast(200%);
}

画像をぼかすには：

img {
 -webkit-filter: blur(10px);
}

また、別のブラウザに対しても行う必要があります。つまり、すべてのcssステートメントが含まれます

  filter: grayscale(100%);
 -webkit-filter: grayscale(100%);
 -moz-filter: grayscale(100%);

複数を使用するには

 filter: blur(5px) grayscale(1);

Codepenデモ

27
Raj Sharma

このコードは、すべてのブラウザーのぼかし効果で機能しています。

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

はい、次のコードを使用すると、指定した画像にぼかし効果を適用することができ、ぼかしの量を選択することもできます。

img {
  -webkit-filter: blur(10px);
    filter: blur(10px);
}
2
JacobG182

CSS3フィルターは現在、Webkitブラウザー（safariおよびchrome）でのみ機能します。

0
Aneesh
img {
  filter: blur(var(--blur));
}
0
Bar Horing