Category - HTML/CSS

CSSで背景画像だけ暗くする方法!

319 views
2017/10/29

今回はcss背景画像だけ暗くする方法をご紹介します。

よく画像上に配置されているテキストを見やすくするために画像だけ暗くしているというのはみかけると思いますが、
やり方を紹介します。
非常に簡単なので是非お試しください。
画像をhtml上でimgタグとして設定するパターンと、
css上でbackground-imageで設定した場合の2パターンに分けて紹介します。

imgタグで画像を設定した場合

<div class="wrapper">
  <img src="○○"/>
    <div class="text-box">
       <p>テキストとか</p>
    </div>
</div>
img{
  filter: brightness(50%);
}

このようにhtml上で画像を設定してそれを背景画像として使用している場合は、
画像自体にfilter: brightness(50%)のように設定するだけです。

background-imageで画像を設定した場合

おそらく背景画像を設定する場合はbackground-imageで画像を設定してあげることが多いと思います。
まずはhtmlの例を挙げますね。

<div class="wrapper">
 <p>テキストとか</p>
</div>

cssでの設定は以下のようになります。

.wrapper{
  width:400px; //任意の値
  height:500px; //任意の値
  background-image:url(○○○); //背景画像の設定
  position:relative;
}
.wrapper:before{ //暗くする要素を生成する
  content:"";
  display:block;
  width:100%;
  height:100%;
  background:#000; //暗くする色の指定
  opacity:.6; //透明度の指定
}

.wrapper p{
  position:absolute; //テキストを浮かせる
}

画像を暗くする場合、イメージとしては画像の上に暗くする要素を重ねるイメージです。
今回の例でいうと画像が設定されている.wrapperに:beforeや:afterを使用して暗くする要素を生成し上に重ねればいいので、
以下のcssがまずは考えられると思います。

.wrapper{
  width:400px;//任意の値
  height:500px;//任意の値
  background-image:url(○○○);//背景画像の設定
  position:relative;
}
.wrapper:before{
  content:"";
  display:block;
  width:100%;
  height:100%;
  background:#000;//暗くする色の指定
  opacity:.6;//透明度の指定
}

ただしこの場合はうまくいきません。
テキストも画像同様に暗くなってしまします。
そこで、テキスト部分にposition:absoluteを設定します。
こうすることでテキスト部分が浮くような形になるので、
画像→暗くする要素→テキストの順番になるのでうまく画像のみを暗くすることが可能となります。

テキストの位置は任意に調整してください。
この方法だと、暗くする要素に黒以外の色を設定することも可能です。

非常に簡単ですので是非挑戦してみてください。

ではでは~!