使用CSS和DataURI来添加杂色滤镜效果
这篇讲的是如何用纯CSS和DataURI技术，为网页元素添加杂色（Noise）纹理效果，且完全无需增加额外的HTTP请求。 文章从一篇国外博文出发，整理并实践了完整流程：先在Photoshop中制作一个50×50像素、半透明的杂色PNG小图，然后通过在线工具将其转换为DataURI格式的字符串。在CSS中，只需为元素添加一个类（如.noise），将DataURI字符串设置为背景图，并配合伪元素与透明度属性，就能实现细腻的杂色覆盖，同时不影响内容显示。整个方案仅基于CSS2.1，兼容性良好。 这种做法的优势非常明显：将图片直接编码进CSS文件，节省了网络请求；最终DataURI字符串可压缩至仅2.05KB左右，非常轻量；效果也易于通过调整原始图片来控制。文章最后指出，同样的原理也适用于生成纸张、石头等多种纹理，为前端实现视觉质感提供了灵活且高效的小技巧。
