【CSS】背景模糊，不模糊主体文字

要实现背景模糊而文字不模糊，可以使用CSS的filter属性来模糊背景，而对文字使用blend-mode属性，将文字与模糊的背景混合。以下是一个简单的示例：

HTML:

<div class="blur-bg">
  <div class="content">不模糊的文字</div>
</div>

CSS:

.blur-bg {
  position: relative;
  background-image: url('background.jpg'); /* 替换为你的图片路径 */
  background-size: cover;
  background-position: center;
  filter: blur(5px); /* 调整这个值来改变模糊程度 */
}
 
.blur-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  filter: blur(5px); /* 和父元素一致的模糊效果 */
}
 
.content {
  position: relative; /* 确保文字在模糊背景之上 */
  z-index: 1;
  color: #fff; /* 根据背景调整文字颜色 */
  mix-blend-mode: multiply; /* 与模糊的背景混合 */
}

在这个例子中，.blur-bg元素的背景被模糊处理，并且使用::before伪元素再次应用相同的模糊效果，确保文字不会被模糊。.content内的文字通过mix-blend-mode: multiply与模糊的背景混合，显示为清晰的文本。