[CSS]画像を暗くしてみる
このブログでもちょくちょくPhotoshopを使わずともCSSで色を変えられる…ということを書いていますが、実にいろいろなやり方があります。今回は画像を暗くするというテーマです。可視性を上げるために、暗くした背景画像に白い文字を重ねるという手法をよく見かけますが、今回はその方法について書きたいと思います。
サッと簡単に画像を暗くする
ただ画像を暗っぽくするだけ、という場合、この方法が一番簡単ではないでしょうか…
まず、画像を用意します。
1 2 3 | <p> <img src="https://unsplash.it/300/200 /" alt=""/> </p> |
要素にクラス名をつけます。<p>に.filter、<img>に.filter-imgとでもしておきましょうか。
1 2 3 | <p class="filter"> <img src="https://unsplash.it/300/200/" alt="" class="filter-img" /> </p> |
それぞれのクラスにスタイルをあてていきます。
1 2 3 4 5 6 7 8 | .filter { background: #000; } .filter-img { display: block; opacity: .6; } |
.filterは背面を黒くして、.filter-imgはdisplay: block;で背面と画像の位置を揃え、opacity: .6;で画像自体の色を40％薄めて背景の黒を出すいうやり方です。
サンプルはこちらです。
See the Pen image-color-filter-darken by necomacustom (@tamayura) on CodePen.27739
比較のためdisplay: inline-block;で2枚の画像を並べているので、気づかなかったのですが、1枚の画像をこのやり方で暗っぽくするには、<p>の幅を画像と同じにする必要があるようです。
これは背景色を変えるだけで、他の色にもできますね。
背景画像を暗くして文字を乗せる
今回の本題です。よく見かけるかな、と思ったのですが、意外に見当たらなかったので…こういう感じのサイトを見かけたことがあるかもしれません（とやや自信なさげ…）。
画像の上に文字を乗せると可視性が悪くなることがあるので、画像を暗くして明るい色のテキストを乗せるという工夫です。
背景画像を暗くしようと前章のやり方をすると、中の要素まで一緒に暗くなってしまうのです。そこでPhotoshopのように背景画像を暗くする透過フィルム、さらに文字をつけたフィルムを重ねるイメージで表現します。
さて、そのやり方なのですが…まず、マークアップしてしまいましょう。
1 2 3 4 5 6 | <div class="bg"> <div class="box"> <h1>アテクシの個人主義</h1> <p>アテクシは今日しきりにそんな希望人としてのの後で起りないまい。無論前が腐敗らはいよいよこの反対たなけれなりを眺めてみろませがも持しなかったし、少しにはするずですましませ。実に違っですつもりは引続き直接からとうとうますなくだ。</p> </div> </div> |
クラス名.bgに背景画像を指定して、その中にposition: absolute;で．ｂｏｘを浮かせて文字を乗せる感じです、はい。
順番に行きましょう。まず、画像を用意します。
1 2 3 4 5 6 | .bg{ background: url(http://pilgrim-guild.com/wp-content/uploads/2017/05/water-lily.jpg) no-repeat center; background-size: cover; position: relative; height:100%; } |
background-size: cover;は画像の幅と高さの比率は固定されたまま、背景の表示領域を覆うように表示されます。また、表示領域が変更された場合でも、画像の中心が確認できるように表示されます。レスポンシブデザインでよく使いますね。
次は、暗くする透過フィルムを作ります。
1 2 3 4 5 6 7 8 9 | .bg::before{ content: ' '; background-color: rgba(0,0,0,.5); position: absolute; top: 0; right: 0; bottom: 0; left: 0; } |
::beforeは擬似要素といい、::beforeは「要素の前にこの内容を挿入するよ」という意味合いです。
content: ‘ ‘;は結構奥深いプロパティで、私も記事にしたいくらいですが、ここでは.boxもposition: absolute;で浮かせるために、.bg::beforeの大きさがなくなって、このフィルム部分が表示されないんです…
さらに、このフィルムを画面いっぱいに広げるために、top / bottom / left / rightの各プロパティを0にしてあげます。
次に、background-color: rgba(0,0,0,0.5);で透過する黒を、ってrgbaの最後の数値「.5」がopacity:0.5;と同じ意味なんですけれどね…。しかし、こう書くとコードを減らせます。
最後は文字フィルムの部分です。
1 2 3 4 5 6 7 8 9 | .box{ position: absolute; width: 100%; text-align: center; } h1,p{ color: #fff; } |
これで一応完成です。少し文字の位置をいじりましたが、サンプルはこちらです。
See the Pen fullsize-bg-darken by necomacustom (@tamayura) on CodePen.27739
結構イケてると思うのですが、これ以上にスマートに書く方法があるんです…
linear-gradientを使う
linear-gradient()はグラデーション画像を作成するbackground-imageの関数で、開始と終了を同じ色にすれば、単色を背景に乗せることができます。
別の機会にまとめますが、例えばこんな感じに背景にグラデーションの色を乗せられます。
See the Pen linear-gradient by necomacustom (@tamayura) on CodePen.27739
それでは、linear-gradientを使って背景画像を暗くします。マークアップは前章と同じです。
1 2 3 4 5 6 | <div class="bg"> <div class="box"> <h1>アテクシの個人主義</h1> <p>アテクシは今日しきりにそんな希望人としてのの後で起りないまい。無論前が腐敗らはいよいよこの反対たなけれなりを眺めてみろませがも持しなかったし、少しにはするずですましませ。実に違っですつもりは引続き直接からとうとうますなくだ。</p> </div> </div> |
文章は気にしないでください。夏目漱石の一節を一人称だけ改変しています。
画像を用意するのも前章と同じです。
1 2 3 4 5 6 | .bg{ background-image: url(http://pilgrim-guild.com/wp-content/uploads/2017/05/water-lily.jpg); background-size: cover; background-position: center; height: 100%; } |
linear-gradient()を使うので、backgroundプロパティはbackground-imageに変更します。それに伴って画像の位置をbackground-position: center;で設定します。
そして、ここがキモです。linear-gradient()をbackground-imageに書いていきます。
1 2 3 4 5 6 | .bg{ background-image: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url(http://pilgrim-guild.com/wp-content/uploads/2017/05/water-lily.jpg); background-position: center; background-size: cover; height: 100%; } |
これだけで完了です。あとは文字の色を変え、中央に配置して見た目を整えれば終わりです。
前章ではtranslateを使って上下左右の中央揃えをしましたが、せっかくなのでFlexboxで上下左右中央揃えをします。サンプルは以下です。
See the Pen fullsize-bg-darken-linear-g by necomacustom (@tamayura) on CodePen.27739
linear-gradientがやや難しいものの、こちらの方が融通も利くし、簡単…かもしれませんね。
レスポンシブ対応のサイトでガシガシ使っていけそうです。
今回は以上です、お疲れ様でした！
参考にしたサイト
CSSだけで背景写真のみを暗くする | Glatch（グラッチ）
この他にもまだやり方があります…それも載せようと思いましたが、あまりにもボリュームが大きくなりそうだったので、別の機会に紹介しようと思います。
それにしても、これを書こうと思った時に、意外にも単純に背景画像を暗くしたヒーローイメージのサイトが見つからず「少し遅れているのかなー」なんて思ってしまいました(^^;)
それはそうとゴールデンウィーク始まりましたね。私はどうしても空いている時に行きたいところがあるので、期間中はコードかブログを書いて過ごします。皆さんも楽しい休日をお過ごしください。ねこま（@necomacustom）でした。