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

画像のCSSフィルターWP CSS
画像のCSSフィルター

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

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

  • コードは filter を利用

フィルタなし(none)

img {
    filter:none;
}

画像をぼかす(blur)

画像をぼかす ソース

img {
    filter:blur(3px);
}

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

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

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

画像のCSSフィルター
画像のCSSフィルター blur(3px)
Advertisements

画像を暗くする(brightness)

画像を暗くする

img {
    filter:brightness(0.5);
}

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

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

brightness(0.5) で暗くした場合

画像のCSSフィルター
画像のCSSフィルター brightness(0.5)

画像に影をつける(drop-shadow)

画像に影をつける

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

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

2px右へ2px影をつけるマイナスで左へ影
4px下へ4px影をつけるマイナスで上へ影
6pxぼかし(6px)
black色(黒)
Advertisements

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

画像のCSSフィルター
画像のCSSフィルター

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

画像のCSSフィルター
画像のCSSフィルター

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

画像のCSSフィルター
画像のCSSフィルター

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

画像を透明にする(opacity)

画像を透明にする

img {
    filter:opacity(0.5);
}

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

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

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

画像のCSSフィルター
画像のCSSフィルター opacity(0.5)

コントラストをつける(contrast)

コントラストをつける

img {
    filter:contrast(1.3);
}

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

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

contrast(1.3) の場合

画像のCSSフィルター
画像のCSSフィルター contrast(1.3)

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

画像を鮮やかにする

img {
    filter:saturate(1.3);
}

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

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

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

画像のCSSフィルター
画像のCSSフィルター saturate(1.3)

その他のフィルター

モノクロにするgrayscale(1)1でモノクロ、0で通常
セピアにするsepia(1)1でセピア、0で通常
鮮やかにするsaturate(1.3)1が通常

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

画像のCSSフィルター
画像のCSSフィルター grayscale(1)

Advertisements
タイトルとURLをコピーしました