【CSS】画像を暗く、黒っぽくする方法

ここで言う「黒っぽい」は黒く色が見えにくくなる状態で、「暗い」は明度が下がり濃くなったような状態です。

CSSだけで画像を暗くする方法、黒っぽくする方法を解説します。

応用するとマウスを乗せたときに暗くすることも可能です。

反対に画像を明るく、白っぽくする方法はこちら↓

画像を黒っぽくする方法

画像を黒っぽくするには背景を黒くしたうえで画像を「opacity」で半透明にします。

<style>
.example1{
    width: fit-content;
    background: #000;
}
.example1 img{
    /*コレ*/opacity: 0.5;
    display: block;
}
</style>
<div class="example"><img src="https://csshtml.work/wp-content/uploads/colorful.jpg"></div>

opacityは要素の透明度を調整するCSSです。1が不透明で0が透明です。少数か%で指定します。

背景を黒くするには「background: #000」を指定します。

箱となるdivを画像とピッタリ合わせるには「width: fit-content」を指定します。

imgの下に空白ができないようにimgに「display: block」も指定します。

画像を暗くする方法

画像を暗くするには画像を重ねて、上に重なっている画像に「mix-blend-mode:multiply」を指定します。

【画像を重ねる方法1】backgroundを使う

divの背景の画像とimgが完全に重なるようにした方法です。

CSSが先述した「画像を黒っぽくする方法」と似ているのが特徴です。

<style>
.example2{
    width: fit-content;
    background: url(https://csshtml.work/wp-content/uploads/colorful.jpg) no-repeat 0/cover;
}
.example2 img{
    /*コレ*/mix-blend-mode:multiply;
    display: block;
}
</style>
<div class="example2"><img 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には指定しないようにしましょう。

<style>
.example3{
    position: relative;
}
.example3 img:nth-of-type(n+2){
    /*コレ*/mix-blend-mode:multiply;
    position: absolute;
    top: 0;
    left: 0;
}
</style>
<div class="example3"><img src="https://csshtml.work/wp-content/uploads/colorful.jpg"><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の数を増やすともっと暗くなります。

imgを複数重ねてもっと暗くしたうえで、1番上に重なっているimgにopacityを指定することで細かい調節も可能です。

【まとめ】画像を暗く、黒っぽくする方法

画像を黒っぽくする方法

背景を黒くしたうえで画像を「opacity」で半透明にする

画像を暗くする方法

画像を暗くするには画像を重ねて、上に重なっている画像に「mix-blend-mode:multiply」を指定する

少し弱くする方法

一番上に重なっている画像にopacity

もっと暗くする方法

「mix-blend-mode:multiply」を指定したimgを複数重ねる

以上、CSSで画像を暗くする方法、黒っぽくする方法でした。