Css 像素图案叠加在网站部分-它是如何做到的？

我一直在试图弄清楚如何将像素模式叠加应用于网站的某个部分，如本网站：在顶部的背景视频图像和底部的图像部分

我相信这是相当简单的，我只是不知道谷歌尝试和寻找css或任何我需要实现它

谢谢你的回复！ 大卫

来看看

使用pseudo element:after，可以添加重复的背景，并使其位置为：绝对，左上右下为零

CSS

---

如果你使用浏览器的开发工具查看网站，你会发现他们只是包含了一个空div，将其缩放到其容器的100%宽度和高度，绝对定位，给定它比视频容器更高的z索引，并使用可平铺的背景图像生成你看到的对角线。在本例中，应用于div的类称为mk section mask，应用于该类的css为

.mk-section-mask {
    background: url(../../images/video-mask.png) center center repeat;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
}

其中video-mask.png是一个4px的正方形png，有一条对角线穿过它

希望有帮助

---

Dan

一般来说，当您想知道如何实现某种效果或布局时，请尝试浏览器中的web检查工具。我用谷歌Chrome开发网站，它附带了一个

至于你的具体问题，有几种方法可以做到这一点。如果要将此覆盖应用于非-，我的方法将使用：

将类覆盖应用于任何内容，您就可以开始了。不过有一个问题：覆盖层中的元素不会响应鼠标/触摸事件，因为顶部的覆盖层将首先获取它们

.mk-section-mask {
    background: url(../../images/video-mask.png) center center repeat;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
}

.overlay {
    position: relative;
}
.overlay:after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: url(path/to/your/transparent/overlay.png) repeat scroll 0 0;
}