CSS中如何让重复平铺的背景噪点图与渐变背景位置完全对齐

你遇到的错位问题来自CSS多背景属性的默认赋值逻辑：当你同时设置多个背景层时，background-repeat、background-size、background-position如果仅填写一个值，会被默认复用给所有背景层。而你叠加的渐变层本身不需要平铺，强行应用repeat规则就会导致和需要平铺的噪点图层位置不匹配。

直接给每个背景层单独配置对应的属性，属性值顺序和background-image的层顺序一一对应即可：

• 渐变层统一设置为no-repeat，尺寸铺满容器，位置从左上角开始
• 噪点图层单独设置为repeat，使用原始尺寸平铺

修改后可用的CSS代码如下：

div {
  width: 800px;
  height: 800px;
  /* 属性值顺序和background-image的层顺序一一对应：渐变1、渐变2、噪点图 */
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: 100% 100%, 100% 100%, initial;
  background-position: 0 0, 0 0, 0 0;
  background-image: linear-gradient(90deg,#ffab00 50%,transparent 100%),linear-gradient(270deg,white 0%,transparent 9%,transparent),url(https://i.sstatic.net/ILZHP.png);
}

• 如果你的噪点图有缩放需求，background-size请设置为噪点图原始宽高的整数倍，避免非整数缩放导致的平铺边缘错位
• 所有背景层的background-position保持一致即可确保完全对齐

内容的提问来源于stack exchange，提问作者bobi bob boby