web-dev-qa-db-ja.com

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

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

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