方法-画像効果を追加する
画像に視覚効果を追加する方法を学びます。
画像フィルター
CSSフィルター
CSSfilter
プロパティは、要素に視覚効果(ぼかしや彩度など)を追加します。
注:フィルタープロパティは、Internet Explorer、Edge 12、またはSafari5.1以前ではサポートされていません。
グレースケールの例
すべての画像の色を白黒(100%グレー)に変更します。
img {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
Original image
grayscale(100%)
ぼかしの例
すべての画像にぼかし効果を適用します。
img {
-webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
filter: blur(5px);
}
Original image
blur(5px)
CSSフィルターの詳細については、 CSSフィルタープロパティにアクセスしてください。