多くのスマートフォン(サムスンギャラクシーIIを例)では、フォトギャラリーを閲覧すると、そのぼやけたコピーがバックグラウンドでレイアウトされます。これはCSSによって動的に実現できますか(つまり、写真のコピーを事前に保存せずに)。画像をぼかすための複雑なCSS画像フィルターはありますか?
CSS3フィルター を使用できます。実装は比較的簡単ですが、現時点ではWebkitでのみサポートされています。ただし、Samsung Galaxy 2のブラウザーはWebkitブラウザーだと思うので、サポートする必要がありますか?
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);
このコードは、すべてのブラウザーのぼかし効果で機能しています。
filter: blur(10px);
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);
はい、次のコードを使用すると、指定した画像にぼかし効果を適用することができ、ぼかしの量を選択することもできます。
img {
-webkit-filter: blur(10px);
filter: blur(10px);
}
CSS3フィルターは現在、Webkitブラウザー(safariおよびchrome)でのみ機能します。
img {
filter: blur(var(--blur));
}