使う機会が少ないもので、いざ使う場面で忘れてるのでメモメモ。
元ネタさんに感謝！
https://www.sejuku.net/blog/53162
/* 基本 */
.background_test {
background: linear-gradient(90deg, rgba(22, 135, 237, 0.6), rgba(20, 55, 90, 0.9));
}
/* グラデーション + 画像 ※画像が背面側となり、半透過のグラデなら画像の上に色が付けられる */
.background_test {
background: linear-gradient(90deg, rgba(22, 135, 237, 0.6), rgba(20, 55, 90, 0.9)) ,url(test_img.jpg);
}
/* 画像 + グラデーション ※画像が前面 */
.background_test {
background: url(test_img.jpg) , linear-gradient(90deg, rgba(22, 135, 237, 0.6), rgba(20, 55, 90, 0.9));
}
背景画像の調整は、上記の記述の後に「background-repeat:」や「background-size:」で設定できるみたい。もしかするともっと他の書き方もあるかもしれないので、今後使いながら検証。