cssで背景画像を複数設定する方法

背景を複数設定する方法

.background01{
  background-image: url("./sample01.png"), url("./sample02.png");
}

背景を複数（3枚以上）設定

.background02{
  background-image: url("./sample01.png"), url("./sample02.png"), url("./sample03.png");
}

背景を複数設定し他の要素も一緒に設定

.background03{
  background:
  url("./sample01.png") 150px top no-repeat,
  url("./sample02.png") 350px top no-repeat,
  url("./sample03.png") 50px top / 300px no-repeat;
}

背景の重なり順は書いた順に上から表示

.background04{
  background:
  url("./sample01.png") 100px top no-repeat, //1番目に表示
  url("./sample02.png") 150px top no-repeat, //2番目に表示
  url("./sample03.png") 200px top no-repeat; //3番目に表示
}

背景色も一緒に設定

.background05{
  background:
  url("./sample01.png") 150px top no-repeat,
  url("./sample02.png") 350px top no-repeat,
  url("./sample03.png") 50px top / 300px no-repeat,
  #999;
}

背景色をグラデーションで透過設定

.background06{
  background:
  linear-gradient( rgba(150, 150, 150, 0.5), rgba(150, 150, 150, 0.5)),
  url("./sample01.png") 150px top no-repeat,
  url("./sample02.png") 350px top no-repeat,
  url("./sample03.png") 50px top / 300px no-repeat;
}

ブログ記事