低质量图像占位符 (LQIP) 在网页设计中占有一席之地。有许多不同的解决方案，但主要问题是生成它们往往依赖于 JavaScript 之类的东西，需要大量非人类可读的代码，或其他权衡。 [Lean]在纯 CSS 中提出了一个优雅、最小的解决方案来创建 LQIP 。
它的工作原理如下：所有必需的数据都打包到单个 CSS 整数中，直接在 CSS 中解码（不需要任何 JavaScript）以动态生成立即渲染的图像。另一个好处是，这种方法不需要任何包装器或长数据字符串，可以避免 HTML 混乱。代码只不过是像<img src="…" style="--lqip:567213">这样的行，这当然很整洁，对于那些手动编辑文件的人来说也是一个受欢迎的福音。
从头开始生成 LQIP 的技巧是获得一个不难看的输出，或者在其组成中不会出现其他不和谐的情况。 [Lean] 进行了实验，直到确定了一种能够可靠地提供平滑的颜色渐变和平衡的编码方法。
因此，此方法仅使用 CSS 将单个整数转换为完美可用的 LQIP。甚至还创建了一个单独的工具 [Lean]，用于将任何给定图像压缩为所使用的整数格式（因此结果看起来像原始图像的模糊版本）。确实，结果看起来非常模糊，但代码很干净、最少，而且该技术很容易实现。您可以在 [Lean] 的交互式 LQIP 画廊中看到它的实际效果。
CSS 内置了很多功能，而且它的功能远不止是样式设计和排列元素。 CSS 中的三角函数怎么样？或者从另一个方向，查看在 ESP32 上实现 CSS（和 HTML）渲染器。
原文： https://hackaday.com/2025/05/01/blurry-image-placeholders-generated-with-minimal-css/