html - 虚线样式叠加效果

Question

我最近偶然发现了这个网站GrandPixels 并发现了一个有趣的效果。在幻灯片部分中，您可以看到图像有点点，通过放大我发现这些点不是图像的一部分，而是一种覆盖，我假设是用 CSS 实现的。谁能解释一下这种效果是如何实现的，最好是用css？

Answer 1

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

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

.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
}

Answer 2

调用 css 类.slideshow-overlay，它使用在图像上方的虚线图像images/bg-overlay-pattern.png(2x2)，background-repeated带有posititon:fixed. 如果您像我在评论中告诉您的那样使用 firebug，您将看到所使用的CSS！

Answer 3

他们使用 div 中的 2x2 像素图像作为背景来实现这一点。

Answer 4

它是带有图像的 div ，它覆盖幻灯片图像。如果你想做类似的事情，你需要在使用这个 css 滑动之前添加 div：

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;

Answer 5

这可以解决问题：

.slides .img
{
     background: url(images/slide1.png) no-repeat;
}

.slides .img:after {
                content: "";
                background: url(images/pattern.png) repeat scroll left top transparent;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                position: absolute;
                z-index: -1;
            }