Effet de porte d'écran d'animation d'images clés CSS

Question

J'ai implémenté le code de cette démo https://tympanus.net/Tutorials/CSS3FullscreenSlideshow/index.html sur ma page Web. Comme vous pouvez le voir dans la démo, les images de fond ont un effet de porte d'écran comme vous le verriez dans un casque VR. C'est un peu pire sur ma page Web, probablement à cause de la luminosité de mes images par rapport à la démo. Je me rends compte que c'est probablement pour augmenter les performances, mais est-il possible de définir une résolution plus élevée? Je voudrais minimiser la pixilation autant que possible. Je n'arrive pas à trouver un article qui traite même de ce problème.

Le ciel est clair dans ma photo, mais rendu en gros points sur la page (voir image).

Answer 1

Ceci est une partie du code que j'ai vu sur le lien que vous avez posté qui est responsable de la texture. Ce qu'il fait est de créer une div sur le dessus de l'image avec une image répétée transparente. Cela donne la texture au-dessus de n'importe quelle image et est la solution idéale parce que vous pouvez facilement échanger des images et garder la texture.

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