【CSS】背景画像に便利!CSSで透過した黒フィルタをかける方法。
突然始まるWebデザインで使えるCSS講座、第二弾。
前回はこちら。
今回は前回に比べニッチな情報。だけど俺的デザインの十八番。
「背景画像などに黒い(白い)フィルターをかける方法」!!!
通称ブラックフィルター。
具体的にはこんなの。
これはIllustratorで即席で作ったものだけど、これがなんと画像を用意するだけでCSSで簡単に作れちゃう。
元の画像と比べてみましょう。
元は白背景でかなり明るめの印象。
それを少し暗くするだけで落ち着いて背景感が出るし、上に置く文字を白系統にすれば画像に邪魔されず文字がくっきり見える。
めっちゃオススメしたいデザインパターンです。
HTML
<body> <div class="contents-bg"> <div class="contents"> <h1>Black Filter</h1> </div> </div> </body>
ポイントはdivの箱を2つ作ること。外の箱は背景画像設置用。内側の箱はフィルター&中身(文字とか)用。もちろん中身には何突っ込んでも大丈夫。今回はh1を置いてみました。
CSS
* { margin: 0; padding: 0; } .contents-bg { background-image: url(../images/sample-img.jpg); background-size: cover; background-position: center; height: 500px; } .contents { background-color: rgba(0,0,0,0.6); height: 500px; } .contents h1 { color: #fff; line-height: 500px; text-align: center; }
ここでのポイントは外と中の箱の高さを同じにするということです。そして背景画像指定は外で、内側の箱で背景色として黒の透過色を設定します。*その他の記述は見やすくするための装飾です。
背景画像の相対リンクはお間違いのないよう十分ご注意を。*1また画像が大きすぎたり、背景が白かったりで「表示されてるのに表示されてるように見えない」ことを避けるため、positionでcenterを指定します。
透過色の設定はrgbaで行うと楽です。aの部分が透過度で、1.0に近ければ近いほど濃くなります。黒の透過のオススメは0.2~0.6ぐらい。素が真っ黒の濃すぎる色なので、ほんのちょっと薄くかけるだけでも写真を落ち着かせることができます。
もちろん色なので、黒以外の色も使えます。素が暗めな画像に白透過フィルタをすれば、明るくぼかしたような効果が出ます。
何か質問等あればコメントや、HP、Twitterなどでどうぞ。
余談
HPを最近更新しました。見てね。
maple-tree.moo.jp
*1:※画像が表示されない場合だいたいここが間違ってます