如何优化实现带背景模糊效果的玻璃质感标题

你当前代码重复3次写入同一张背景地址的问题，本质是没有做资源统一管理，同时冗余DOM过多，可以通过CSS自定义属性+伪元素简化的方式优化，最终效果和原实现完全一致，维护成本和代码简洁度提升明显。

核心优化思路 #

• 用CSS自定义属性全局存储背景图地址，所有用到背景的位置统一调用变量，后续替换图片仅需修改1处
• 用元素伪元素替代冗余的独立DOM节点（原代码的模糊遮罩层、两个重复的h2标签都可以删掉）
• 所有背景引用共用同一个变量值，浏览器只会加载1次图片资源，不会产生额外请求，性能无损耗

优化后完整代码 #

CSS部分 #

/* 全局统一定义背景资源，仅此处引用一次图片地址 */
:root {
  --title-bg: url("https://images5.alphacoders.com/318/318370.jpg");
}
body {
  margin: 0;
  min-height: 100vh;
  background: blue var(--title-bg) no-repeat center center fixed;
  background-size: cover;
}

.title {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}

/* 伪元素实现模糊玻璃层，替代原独立.bimage节点 */
.title::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--title-bg) no-repeat center center fixed;
  background-size: cover;
  filter: blur(10px);
}

h2 {
  font-family: Verdana;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-weight: bold;
  font-size: 18vw;
  text-align: center;
  text-transform: uppercase;
}

/* 伪元素实现原白色遮罩文字层，替代第一个重复h2 */
h2::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  mix-blend-mode: screen;
}

/* 伪元素实现原纹理文字层，替代第二个带背景的h2 */
h2::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--title-bg) no-repeat center center fixed;
  background-size: cover;
  color: #ffffff;
  mix-blend-mode: multiply;
  -webkit-text-stroke: 1px rgba(255,255,255,0.4);
  text-shadow: 3px 3px 10px #000000;
}

HTML部分 #

<div class="title">
  <h2 data-text="MARIO"></h2>
</div>

优化效果说明 #

• 背景图地址全局唯一，后续换图只需要修改--title-bg的值即可，不需要逐行查找替换
• DOM节点从原有的4个（title容器+模糊层div+2个h2）缩减到2个（title容器+1个h2），结构更简洁
• 混合模式、模糊度、文字描边阴影等效果和原实现完全一致，没有视觉偏差
• 虽然CSS中多次调用背景变量，但浏览器对同地址fixed背景会做资源复用，不会重复加载图片，性能和原实现持平

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