狼読

 
2020/05/17

[css]画像をcssだけでモノクロにしてみよう

画像をモノクロにするために、今まで画像編集ソフトを使っていませんでしたか?そんなことをしなくてもcssで画像をモノクロにできます。

今回は、その方法についてサンプルを使ってご紹介したいと思います。

画像をモノクロにしてみよう

htmlで記述したimgタグに対して、cssでgrayscaleを設定することで、モノクロにすることができます。

まずは、色がついている画像を貼ってみましょう

<div class="grayscale"><img src="画像のURL"></div>

上記の画像をモノクロにしたいと思います。

次の様なcssを用意しましょう。

<style>
.grascale img{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
</style>

画像をモノクロにしてみたサンプル実装例

上記の様に画像がcssだけでモノクロになりましたね。
こちらのgrayscaleの数値は0%にしますと、色がついたものになります。

まとめ

今回は、画像編集ソフトを使わず、cssだけでモノクロにする方法をご紹介させていただきました。この方法を使うことで、今まで一手間あったものがcssで解決できてしまいますね。また、モノクロの画像とフルカラーの画像2枚を用意することなくhoverで切り替えたり、見せ方を変えたりなど様々な場面に役に立ちそうです。

Profile Card

お空をかけるプログラマー

空のどこか
常時低空飛行のwebプログラマー 徒然なるままに情報を発信します。

関連記事

Related Post

2020/05/31

[html]placeholderを使いこなしてinputに入力サンプルを入れてみよう

投稿カレンダー

2020年11月
 1
2345678
9101112131415
16171819202122
23242526272829
30  

Technology

category

©狼読