CSS关键帧动画屏幕门效果

Question

我已经在我的网页上实现了此演示https://tympanus.net/Tutorials/CSS3FullscreenSlideshow/index.html中的代码。正如您在演示中看到的那样，背景图像具有您在VR耳机中看到的屏幕门效果。在我的网页上有点糟糕，可能是因为我的图像亮度与演示相比。我意识到这可能是为了提高性能，但有没有办法将分辨率设置得更高？我想尽可能地减少像素化。我似乎找不到任何甚至讨论这个问题的帖子。

我的照片中天空清晰，但在页面上以大点渲染（见图）。

Answer 1

这是我在您发布的负责纹理的链接上看到的一些代码。

它的作用是在图像顶部创建一个带有透明重复图像的div。这使得纹理位于任何图像的顶部，是理想的解决方案，因为您可以轻松地换出图像并保持纹理。

.cb-slideshow:after {
    content: '';
    background: transparent url(../images/pattern.png) repeat top left;
}

.cb-slideshow:after {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0;
}