点式样式叠加效果 [英] Dotted style overlay effect

问题描述

我最近偶然发现这个网站 GrandPixels
，发现了一个有趣的效果。在幻灯片部分，你可以看到图像是点点的，通过放大我发现这些点不是图像的部分，但排序叠加，用CSS实现，我假设。

I have recently stumbled uppon this website GrandPixels and found one interesting effect. In the slideshow section you can see that images are kind of dotted, by zooming in I discovered that these dots are not the parts of the images but sort of overlay, achieved with CSS, I assume. Could anyone explain how this effect is achieved, ideally with css?

推荐答案

这是用2x2覆盖透明PNG图像完成的，可以提取从这里开始：
背景叠加图案

It's done with 2x2 overlay transparent PNG image that can be extracted from here:
Background Overlay Pattern

之后，将 slideshow-overlay 类应用于元素，使其工作：

Afterwards the class slideshow-overlay applied to an element to make it work:

.slideshow-overlay {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    overflow: hidden;
    z-index: -99;
    height: 100%;
    width: 100%;
    background: url("images/bg-overlay-pattern.png") left top repeat
}

这篇关于点式样式叠加效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！