如何实现网站全局重复的背景图与颜色混合效果？

问题出在你当前的实现方式没有让背景图持续覆盖整个视口，滚动后超出首屏的区域无法应用混合效果。可以通过给body添加伪元素来实现全局覆盖的混合背景：

解决方案代码 #

/* 重置body默认样式并设置基础背景色 */
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background-color: #daeef6;
}

/* 用伪元素承载背景图并实现混合效果 */
body::before {
  content: '';
  /* 固定定位确保滚动时始终覆盖整个视口 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 设置重复背景图 */
  background-image: url('https://st.depositphotos.com/1244201/3732/i/950/depositphotos_37326627-stock-photo-grey-grainy-plaster-background.jpg');
  background-repeat: repeat;
  /* 混合模式 */
  mix-blend-mode: soft-light;
  /* 避免伪元素干扰页面交互 */
  pointer-events: none;
  /* 确保伪元素在内容下方 */
  z-index: -1;
}

关键说明 #

• position: fixed让伪元素始终铺满整个浏览器视口，无论页面如何滚动都不会消失
• pointer-events: none保证伪元素不会拦截鼠标点击等交互事件
• z-index: -1将伪元素置于页面内容下方，不会遮挡正常内容
• body设置min-height: 100vh确保即使页面内容不足一屏，背景色也能覆盖整个视口

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