カードデザインやセクションの背景に、画像＋何かしたの色付きのフィルターを敷きたいときの備忘録です。
手順
- background-imageプロパティが当たっているclassのhtmlの要素の
小要素をつくる -
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;
}