【CSS】背景画像に便利！CSSで透過した黒フィルタをかける方法。

突然始まるWebデザインで使えるCSS講座、第二弾。

前回はこちら。

今回は前回に比べニッチな情報。だけど俺的デザインの十八番。

「背景画像などに黒い（白い）フィルターをかける方法」！！！

通称ブラックフィルター。

HTML
CSS
余談

具体的にはこんなの。

f:id:momijitan:20180111235438j:plain

これはIllustratorで即席で作ったものだけど、これがなんと画像を用意するだけでCSSで簡単に作れちゃう。

元の画像と比べてみましょう。

f:id:momijitan:20180111235517j:plain

元は白背景でかなり明るめの印象。

それを少し暗くするだけで落ち着いて背景感が出るし、上に置く文字を白系統にすれば画像に邪魔されず文字がくっきり見える。

めっちゃオススメしたいデザインパターンです。

HTML

<body>
    <div class="contents-bg">
        <div class="contents">
            <h1>Black Filter</h1>
        </div>
    </div>
</body>

ポイントはdivの箱を２つ作ること。外の箱は背景画像設置用。内側の箱はフィルター＆中身（文字とか）用。もちろん中身には何突っ込んでも大丈夫。今回は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;
}