画像にCSSでフィルターをかけて文字を入れる/cssとサンプル

Sponsor

画像にフィルターをかける方法

画像の上に文字を載せる時、画像そのままだと都合が悪い場合があります。その場合などは画像にフィルターをかけたり、または画像を引き立たせるためにフィルターをかけることができます。

フィルタなし（none）

img {
    filter:none;
}

画像をぼかすソース

img {
    filter:blur(3px);
}

3pxを変更してぼかす加減を調整します。

数字が大きくなると効果（ぼかす）が大きくなります。0がフィルタなしで数字が大きくなる程ぼけてきます。

blur(3px) でぼかした場合

画像を暗くする

img {
    filter:brightness(0.5);
}

0.5を変更して暗さを調整できます。

数字が小さくなると暗くなります。0で真っ暗で1がフィルタなしの明るさです。

brightness(0.5) で暗くした場合

画像に影をつける

img {
    filter:drop-shadow(2px 4px 6px black);
}

数字と色を変更でき、影の方向や幅、ぼかし具合を調整できます。

drop-shadow(2px 4px 6px black)

drop-shadow(10px 10px 3px red)（右へ10px、下へ10px、ぼかし3px、赤）

drop-shadow(10px -10px 3px red)（右へ10px、上へ10px、ぼかし3px、赤）

2番目の-10で、上に影が入ります。

画像を透明にする

img {
    filter:opacity(0.5);
}

0.5を変更して透明度を変更できます。

1がフィルタなしの画像で、数字が小さくなるほど透明になります。0で画像が完全に透明になり見えなくなります。

opacity(0.5) で透明にした場合

コントラストをつける

img {
    filter:contrast(1.3);
}

1.3を変更してコントラストを調整できます。

１以上、数字が大きくなるほどコントラストがつきます。

contrast(1.3) の場合

画像を鮮やかにする

img {
    filter:saturate(1.3);
}

1.3を変更して鮮やかさを調整できます。

１がフィルタなしの画像で、数字が大きくなるほど鮮やかになります。

画像を鮮やかにする saturate(1.3)

画像をモノクロにする grayscale(1)