Question

我最近偶然发现了这个网站GrandPixels 并发现了一个有趣的效果。在幻灯片显示部分，您可以看到图像是点状的，通过放大，我发现这些点不是图像的部分，而是用CSS实现的叠加，我假设。任何人都可以解释如何实现这种效果，理想情况下用css吗？

Answer 1

使用2x2叠加透明PNG图像完成，可从此处提取：
Background Overlay Pattern

之后，类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

他们在div中使用2x2像素作为背景来实现这一目标。

Answer 3

css类名为.slideshow-overlay，它使用images/bg-overlay-pattern.png的{{1}}（2x2）background-repeated覆盖posititon:fixed的图像。如果你像我在评论中告诉你的那样使用萤火虫，你会看到使用的 css ！

Answer 4

它是image的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;
            }

虚线样式叠加效果

5 个答案: