暗いここで言う「黒っぽい」は黒く色が見えにくくなる状態で、「暗い」は明度が下がり濃くなったような状態です。CSSだけで画像を暗くする方法、黒っぽくする方法を解説します。応用するとマウスを乗せたときに暗くすることも可能です。「白っぽい」は白く薄くなる状態で、「明るい」は光の量が強くなったような状態です。CSSだけで画像を明るくする方法、白っぽくする方法を解説します。画像を黒っぽくするには背景を黒くしたうえで画像を「opacity」で半透明にします。src="https://csshtml.work/wp-content/uploads/colorful.jpg"></div>opacityは要素の透明度を調整するCSSです。1が不透明で0が透明です。少数か%で指定します。#000」を指定します。fit-content」を指定します。親要素がdivなどのブロック要素の場合、何もしないと横幅がいっぱいになります。親要素を子要素の幅に合わせましょう。block」も指定します。CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。画像を暗くするには画像を重ねて、上に重なっている画像に「mix-blend-mode:multiply」を指定します。CSSで乗算などができるmix-blend-modeの使い方イラストレーターやフォトショップでおなじみの「合成モード」、実はCSSでも実現できるんです。CSSで乗算などができるmix-blend-modeの使い方を解説します。この記事を読む【画像を重ねる方法1】backgroundを使うdivの背景の画像とimgが完全に重なるようにした方法です。CSSが先述した「画像を黒っぽくする方法」と似ているのが特徴です。src="https://csshtml.work/wp-content/uploads/colorful.jpg"></div>mix-blend-mode:multiplyは上に重なるimgだけに指定しましょう。【画像を重ねる方法2】position:absoluteを使うposition:absoluteを使ってimgの上にimgを重ねる方法です。全部のimgにposition:absoluteを指定すると高さがなくなってしまうため、1つめのimgには指定しないようにしましょう。src="https://csshtml.work/wp-content/uploads/colorful.jpg"></div>「mix-blend-mode:multiply」は2つめ以降のimgに指定します。「2つめ以降」は「:nth-of-type(n+2)」で指定できます。「以降」という指定にしているのは後述する「もっと暗くする」方法のためです。上に重なっている画像にopacityを指定して半透明にします。「画像を重ねる方法2」を使ったうえでimgの数を増やすともっと暗くなります。1つ重ね2つ重ね3つ重ねimgを複数重ねてもっと暗くしたうえで、1番上に重なっているimgにopacityを指定することで細かい調節も可能です。「mix-blend-mode:multiply」を指定したimgを複数重ねる以上、CSSで画像を暗くする方法、黒っぽくする方法でした。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。