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

背景をrgbaで設定

.background01{
  background-color: rgba( 0,0,0,0.3);
}

透過をopacityで設定

.background02{
  background: #000;
  opacity: 0.3;
}

rgbaとカラーコードの違い

.background03{
  background-color: #7f7f7f;
}

.background03_2{
  background-color: rgba( 0,0,0,0.5);
}

これだけだと見え方は同じ

rgbaとカラーコードの違い

.background04{
  background-color: #7f7f7f;
}

rgbaで指定した場合

カラーコードで指定した場合

opacityで指定した場合