Question

我一直在试图弄清楚像素图案叠加如何应用于此网站中的网站部分：http://www.tinkeringmonkey.com/（在顶部的背景视频图像和底部的图像）

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

感谢任何回复！大卫

Answer 1

使用伪元素:after，您可以添加重复的背景，并使其左上角 - 右下角的position:absolute为零。

<强> CSS

div {
    width: 300px;
    height: 300px;
    display: block;
    position: relative;
    background: url(https://placekitten.com/g/300/300);
}
div:after {
    content: "";
    background: url(http://dev.bowdenweb.com/a/i/style/patterns/tileables/06/dot-grid-1.png) repeat;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    opacity: 0.5;
    }

Answer 2

如果您使用浏览器的开发者工具检查网站，您会看到他们只是包含一个空div，将其缩放到100％宽度和高度的容器，绝对定位，给定它比视频容器具有更高的z-index，并使用可平铺的背景图像来生成您看到的对角线。在这个例子中，应用于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，其中有一条对角线穿过它...... See here

希望有所帮助

丹

Answer 3

通常，当您想知道如何实现某种效果或布局时，请尝试使用浏览器中的网络检查工具。我使用谷歌浏览器开发网站，它附带very complete tool set。

至于你的具体问题，有几种方法可以达到这个目的。如果您要将此叠加层应用于非void element，我的方法将使用HTML pseudo-elements：

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

将课程overlay应用于任何<div>，您就可以了。但是有一个问题：.overlay内的元素不会响应鼠标/触摸事件，因为顶部的叠加将首先获得它们。

网站部分的像素图案叠加 - 它是如何完成的？

3 个答案: