CSSの「filter」プロパティを使用するとぼかしやグレースケールなど様々なフィルタ効果を画像に適用することができます。
画像の上に文字を配置する場合などに活用してみてください。
それでは以下の画像にフィルターをかけていきます。以下はフィルターを何もかけてない状態です。
フィルタープロパティの種類
blur（ぼかし）
img {
filter:blur(3px);
}brightness（明度）
img {
filter: brightness(0.5);
}contrast（コントラスト）
img {
filter: contrast(200%);
}drop-shadow（ドロップシャドウ）
img {
filter: drop-shadow(10px 10px 0 black);
}grayscale（グレースケール）
img {
filter: grayscale(100%);
}opacity（透明度）
img {
filter: opacity(25%);
}saturate（彩度）
img {
filter: saturate(30%);
}sepia（セピア）
img {
filter: sepia(60%);
}hue-rotate（色相）
img {
filter: hue-rotate(60deg);
}invert（階調）
img {
filter: invert(80%);
}複数指定
img {
filter: blur(2px) grayscale(90%);
}
