How TO - 画像効果の追加

画像に視覚効果を加える方法を学習します。

CSS フィルタ

CSS filter プロパティは、要素に視覚効果（ぼかしや彩度など）を追加します。

注: filter プロパティは、Internet Explorer、Edge 12 や Safari 5.1 以前ではサポートしていません。

グレースケールの例

すべての画像の色を、白と黒（100% の灰色）に変更します：

img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

Original image

grayscale(100%)

Try it Yourself »

ぼかしの例

すべての画像に、ぼかし効果を適用する：

img {
    -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
    filter: blur(5px);
}

Original image

blur(5px)

Try it Yourself »

CSSフィルタの詳細については、CSS filter プロパティをご覧ください。