画像のCSSフィルター
CSSで画像にフィルターを付ける
画像の上に文字を載せる時、画像そのままだと都合が悪い場合があります。その場合などは画像にフィルターをかけたり、または画像を引き立たせるためにフィルターをかけることができます。
filter を利用フィルタなし（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);
} 数字と色を変更でき、影の方向や幅、ぼかし具合を調整できます。
| 2px | 右へ2px影をつける | マイナスで左へ影 |
| 4px | 下へ4px影をつける | マイナスで上へ影 |
| 6px | ぼかし（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) | 1でモノクロ、０で通常 |
| セピアにする | sepia(1) | 1でセピア、０で通常 |
| 鮮やかにする | saturate(1.3) | 1が通常 |
画像をモノクロにする grayscale(1)
画像ファイル形式一覧 /代表的なウェブページのファイル形式
参考 CSS: カスケーディングスタイルシート