如何将颜色与图像混合并设置为全站重复背景？

核心修改思路 #

• 移除原home区域内的背景图片元素，改用body的伪元素承载纹理图，确保覆盖整个页面
• 通过固定定位让纹理背景随页面滚动保持显示，同时设置混合模式与body背景色融合

修改后的代码 #

CSS 关键修改部分

/* ... 保留原有CSS代码，仅修改以下内容 ... */

body {
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background: #daeef6;
  color: var(--text-color);
  overflow-x: hidden;
  position: relative; /* 为伪元素提供定位基准 */
}

/* 添加全局混合背景的伪元素 */
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; /* 重复纹理填充 */
  background-size: auto; /* 保持纹理原始尺寸 */
  mix-blend-mode: soft-light;
  pointer-events: none; /* 不影响页面元素交互 */
  z-index: 0; /* 确保背景在内容下方 */
}

.main {
  overflow: hidden;
  z-index: 5; /* 确保内容在背景之上 */
  position: relative; /* 让z-index生效 */
}

/* ... 保留原有其他CSS代码 ... */

HTML 移除多余元素

删除home区域内的<img>标签：

<!-- 移除这一行 -->
<img src="https://st.depositphotos.com/1244201/3732/i/950/depositphotos_37326627-stock-photo-grey-grainy-plaster-background.jpg" alt="" class="home__shape-bg">

效果说明 #

• 纹理图会以重复模式铺满整个页面，且与#daeef6背景色通过soft-light模式混合
• 固定定位确保滚动页面时背景始终覆盖可视区域
• pointer-events: none保证页面上的按钮、链接等交互元素正常工作

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