如何让CSS背景遮罩仅覆盖body的横向重复背景图？

问题根源在于你用background-blend-mode时，遮罩色是和整个body的背景区域混合，而非仅与背景图覆盖部分混合，导致遮罩延伸到了背景图之外。要实现需求，只需把遮罩和背景图合并为一个横向重复的背景层，同时给body设置白色底层背景即可，无需使用background-blend-mode。

修改后的核心CSS代码 #

.body{
  /* 将遮罩渐变与背景图合并为一个背景层 */
  background-image: linear-gradient(rgba(23, 27, 45, 0.8), rgba(23, 27, 45, 0.8)), url("https://images.pexels.com/photos/13760434/pexels-photo-13760434.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
  background-repeat: repeat-x; /* 仅让带遮罩的背景图横向重复 */
  background-color: white; /* 背景图之外的区域显示白色 */
  min-height: 100vh; /* 确保body至少占满视口高度 */
}

完整代码示例 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .body{
      background-image: linear-gradient(rgba(23, 27, 45, 0.8), rgba(23, 27, 45, 0.8)), url("https://images.pexels.com/photos/13760434/pexels-photo-13760434.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
      background-repeat: repeat-x;
      background-color: white;
      min-height: 100vh;
    }
    .main{
      display: flex;
      justify-content: space-between;
    }
    .card{
      background-color: white;
      padding: 1rem;
    }
  </style>
</head>
<body class="body">
  <main class="main">
    <div class="card">
      <h1>Card 1</h1>
    </div>
    <div class="card">
      <h1>Card 2</h1>
    </div>
    <div class="card">
      <h1>Card 3</h1>
    </div>
  </main>
  
</body>
</html>

关键说明 #

• 用linear-gradient生成的半透明遮罩层直接叠在背景图上，两者作为一个整体横向重复
• background-color: white会填充背景图未覆盖的区域，也就是横向重复结束后的部分
• 添加min-height: 100vh确保body高度至少铺满视口，避免背景图只显示在内容高度范围内

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