CSS中.banner元素多背景图无法单独缩放的问题咨询

问题出在background-size的参数数量和背景图层数量不匹配——浏览器会循环复用已有的尺寸值，导致所有背景都用上了第一个70%的设置。

正确的写法是让background-size的参数和background-image里的图层一一对应，每个背景层对应一个尺寸值：

.banner {
  background-image: url('GlassEffect.png'), linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.2)), url('background.jpg');
  /* 第一个值对应GlassEffect.png，后两个对应渐变和背景图 */
  background-size: 70%, cover, cover;
  background-repeat: no-repeat;
  background-position: center center;
}

关键说明： #

• background-image里的图层顺序是从上到下（第一个图层在最上层），background-size的参数顺序必须和它完全对应
• 如果参数数量少于背景图层数量，浏览器会从头循环复用参数。比如你只写70% cover，第三个背景层会复用第一个的70%，这就是你之前遇到的问题
• 线性渐变作为背景层时，cover同样有效，它会让渐变完全覆盖元素区域

内容的提问来源于stack exchange，提问作者CherryOVERFLOW