[CSS]画像の上に単色フィルター

カードデザインやセクションの背景に、画像＋何かしたの色付きのフィルターを敷きたいときの備忘録です。

手順

1. background-imageプロパティが当たっているclassのhtmlの要素の小要素をつくる
2. background-color: rgba(0,0,0,0.5);とheight: inherit;をプロパティを当てる

※ 黒色フィルターの場合です。rgbaを変更すればもちろん他の色でも可です。

加工前

<!-- 画像部分のみ抽出 -->

<div class="card__picture">
   <div class="card__imge"></div>
</div>                                                        

/* ------- 画像 スタイル ------- */

.card__picture{
    width: 500px;
    height: 250px;
}

/* 画像の設定 */
.card__imge{
    height: inherit;
    background-image: url(../img/coverSample.jpg);
    background-size: cover;
    background-position:center;
    background-repeat: no-repeat;   
}

加工後

<!-- 画像部分のみ抽出 -->

<div class="card__picture">
   <div class="card__imge">
　　　<div class="filter--black"></div>  <!-- このdivを追加(小要素) -->
　　</div>
</div>                                                        

/* ------- 画像 スタイル ------- */

.card__picture{
    width: 500px;
    height: 250px;
}

/* 画像の設定 */
.card__imge{
    height: inherit;
    background-image: url(../img/coverSample.jpg);
    background-size: cover;
    background-position:center;
    background-repeat: no-repeat;   
}

/* このセレクタを追加 */
.filter--black{
    background-color: rgba(0,0,0,0.4);
    height: inherit;
}

参考記事

次回

[CSS]画像の上にグラデーションフィルター