如何用CSS仅模糊指定DIV内文本而不模糊其背景图片？

当然可以做到！不用改动任何HTML结构，纯CSS就能实现你要的效果，给你两个实用的方案，都适合临时教程截图的场景：

方案1：用文本阴影模拟模糊（最简单） #

这个方法直接针对文本本身处理，完全不影响背景图，代码极简：

.draggable.ad .___2_4x4 {
  color: transparent; /* 隐藏原始文本 */
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.8); /* 用模糊阴影替代文本显示 */
}

原理说明： #

把文本颜色设为透明，然后用带有模糊效果的文本阴影来模拟原本的文本内容——这样背景图会完整保留清晰状态，只有文本部分呈现模糊效果。你可以调整text-shadow里的3px来控制模糊程度，rgba的最后一个值调整阴影的透明度，匹配你的需求。

方案2：分离背景与文本的模糊范围 #

如果方案1的效果不够精准（比如文本有特殊样式），可以用伪元素单独承载背景图，再给原元素添加模糊：

.draggable.ad .___2_4x4 {
  filter: blur(3px); /* 模糊原元素（仅文本） */
  background: none; /* 移除原元素的背景图 */
  position: relative;
}
/* 用伪元素还原背景图，不受模糊影响 */
.draggable.ad .___2_4x4::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(/images/ad.png); /* 复制原背景图属性 */
  background-repeat: no-repeat; /* 若原样式有repeat/position等，需同步添加 */
  background-position: center;
  z-index: -1; /* 把背景放到文本下方 */
}

原理说明： #

把原元素的背景图转移到伪元素上，伪元素作为背景层不会被filter影响；原元素只保留文本，添加模糊后就只有文本被模糊处理。注意要同步原背景的repeat、position等属性，确保和原效果一致。

两个方案都不需要修改HTML，直接添加CSS就能快速实现模糊文本、保留背景的效果，非常适合你临时截图的需求。

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