【CSS】画像を視覚的に暗く見せる方法

Webデザインでは、視覚的な影響力を持つ画像は、ユーザー体験を向上させるための強力なツールです。しかし、場合によっては画像が明るすぎて、その他の要素やテキストが見づらくなることもあります。そんな時はCSSを使用して画像を暗くすることが有効です。

今回は、imgタグで設定した画像を暗くする方法について解説します。このテクニックはCSSの疑似要素と透明度を活用しており、画像に直接変更を加えることなく、画像を視覚的に暗く見せる効果を作り出します。

まず、HTMLとCSSの基本的な設定は以下の通りです。

HTML:

<div class="darkened-image">
    <img src="your-image.jpg" alt="Description">
</div>

CSS:

.darkened-image {
    position: relative;
    display: inline-block;
}

.darkened-image::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
}

.darkened-image img {
    width: 100%;
    height: auto;
    display: block;
}

この例では、.darkened-image::before 疑似要素を使用して半透明の黒色レイヤーを作り、それをimgタグの上に重ねることで暗く見せる効果を作り出しています。0.6の値は、この黒色の透明度を調整します。値を増やすとより暗く、減らすとより明るくなります。

なお、ここで使用しているz-indexプロパティは、重なった要素の表示順序を制御します。z-index: 1;を設定することで、疑似要素が画像の上に配置されます。

このように、CSSを使ったimgタグの画像暗化テクニックは、画像の色調を維持しながら、ページ全体の視覚バランスを保つための素晴らしい方法です。あなたもぜひ試してみてください。