【CSS】画像を明るく、白っぽくする方法

ここで言う「白っぽい」は白く薄くなる状態で、「明るい」は光の量が強くなったような状態です。

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

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

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

画像を白っぽくする方法

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

<style>
.example1{
    width: fit-content;
    background: #FFF;
}
.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: #FFF」を指定します。

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

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

画像を明るくする方法

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

【画像を重ねる方法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:screen;
    display: block;
}
</style>
<div class="example2"><img src="https://csshtml.work/wp-content/uploads/colorful.jpg"></div>

mix-blend-mode:screenは上に重なる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:screen;
    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:screen」は2つめ以降のimgに指定します。「2つめ以降」は「:nth-of-type(n+2)」で指定できます。「以降」という指定にしているのは後述する「もっと明るくする」方法のためです。

少し弱くする方法

一番上に重なっている画像にopacityを指定して半透明にします。

もっと明るくする方法

「画像を重ねる方法2」を使ったうえでimgの数を増やすともっと明るくなります。

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

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

画像を白っぽくする方法

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

画像を明るくする方法

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

少し弱くする方法

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

もっと明るくする方法

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

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