如何实现点网格图像光栅化（响应式图像替代技术）？答案

【问题标题】：How to achieve dotted grid image rasterization (responsive image alternative technique)?如何实现点网格图像光栅化（响应式图像替代技术）？
【发布时间】：2020-07-05 23:55:10
【问题描述】：

我偶然发现了一种有趣的技术，它可以替代为不同断点提供不同图像文件的经典方法，如 this page 所示

他们所做的基本上是对所有屏幕尺寸/断点使用大小为 1024x1024 的相同标头图片。当屏幕尺寸为>= 768 px 时，该图像将覆盖有黑点网格，这让人想起了像素在管显示器/电视上的排列方式之一。这样，图像可以被拉伸到远远超过 1024 像素，但仍然显得有些锐利，因为黑点会覆盖任何大像素块和 JPEG 伪影。

我似乎无法弄清楚这是如何使用 CSS 或 JS 在他们的页面上完成的。是否有任何开箱即用的 CSS 或 JS 框架/插件，或者任何人都可以帮助确定实现此效果所需的样式/代码？

【问题讨论】：

父图像 position: relative; z-index: 0 及其覆盖 (::before) content: ''; position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%。也许一些额外的摆弄，但这是通用的方法。 z-index 的使用是可选的（content 也可能是可选的）。此外，使用 SVG 模式作为叠加层，更适合放大/缩小。
当然还有::before { opacity: .25 }（或其他一些低值），否则叠加层会混淆图像。对于叠加层中需要不可见（几乎不可见）的任何像素，使用 Alpha 通道值为 0（非常低）的 PNG。
啊，谢谢@RenevanderLende，我忽略了DevTools 中的::before 选择器，现在它变得一清二楚了。

标签： css image responsive

【解决方案1】：

要将<img> 与其他图像（或文本，就此而言）叠加，一般方法是：

img {
    position: relative; /* make child elements move relative to this parent */
    width: 100%;
    object-fit: cover;
}
img::before {
    position: absolute; /* move this element absolute within parent */
    content: '';        /* needed as an empty :before will not get painted */
    top: 0;
    left: 0;

    background-image: "image-URL";

    ...
    additional background behaviour properties
    ...

    opacity: 0.25;      /* some low value for tranparency */

    /* either */
    width : 100%;
    height: 100%;

    /* or */
    right: 0;
    bottom: 0;
}

建议使用带有 Alpha 通道的 PNG（用于透明像素）或带有某种图案的 SVG（尺寸更小，调整页面时更准确的像素绘制/缩放，“更清晰”）。

【讨论】：