【CSS】サイト制作時の備忘録【随時更新】
CSSの背景を復数表示させる方法
例えば固定ページのタイトルの背景画像を設定する場合、一つひとつの画像に透過性のある黒を重ねるのは面倒くさい。
CSSでそれを一気に指定してしまえば、楽だなーって思ってたら、その方法があったので記載。
一番最初に指定した画像が最前面に表示され、その後に続いていく感じ。
.sample {
background: 【最前面】, …, 【再背面】;
}
上の「オーダースーツ」の画像は、以下の３つを準備。
【最前面】透過性のあるドット画像↓
【２番目】黒のグラデーション（CSSで指定）
【再背面】スーツの画像
コードは以下の通り。
.sample {
padding: 100px;
background:
url("img/dot_bg.png"), /* 最前面 */
linear-gradient( to left, rgba(0,0,0,0), #000 ), /*2番目 */
url("img/fv.jpg"); /* 最背面 */
background-repeat:
repeat, /* dot_bgに適用 */
repeat, /*liner-gradientに適用 */
no-repeat; /*fv.jpgに適用 */
background-size:
auto,
auto,
cover;
}
結果はこんな感じ。
