css模糊制作

CSS模糊效果实现方法

使用filter: blur()属性
通过CSS的filter属性配合blur()函数实现模糊效果。数值越大模糊程度越高，例如：

.blur-effect {
  filter: blur(5px); /* 5像素模糊半径 */
}

模糊背景与内容分离
若需仅模糊背景而保持内容清晰，可使用伪元素或额外层：

.container {
  position: relative;
}
.container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("bg.jpg");
  filter: blur(8px);
  z-index: -1;
}

性能优化技巧

• 对静态元素使用will-change: filter提前告知浏览器优化渲染
• 限制模糊范围，避免大面积应用
• 配合transform: translateZ(0)触发硬件加速

文字模糊的特殊处理
文字直接模糊可能导致可读性下降，可通过叠加半透明背景提升对比度：

.text-blur {
  filter: blur(1px);
  background-color: rgba(255,255,255,0.7);
  padding: 0.5em;
}

浏览器兼容性
现代浏览器均支持filter属性，对旧版IE需使用SVG滤镜或降级方案：

/* IE9-备用方案 */
.no-cssfilter .blur-fallback {
  opacity: 0.8;
}