Les feuilles de style CSS CSS3 pixeliser fond de points

Ici est le mieux que je pouvais venir pour correspondre à votre image. Il est adapté de l'exemple ici par Lea Verou Quel sera votre secours pour les non css3 navigateurs?

body {
background-image: -moz-linear-gradient(45deg, #666 25%, transparent 25%), 
-moz-linear-gradient(-45deg, #666 25%, transparent 25%), 
-moz-linear-gradient(45deg, transparent 75%, #666 75%), 
-moz-linear-gradient(-45deg, transparent 75%, #666 75%);
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #666), color-stop(.25, transparent)), 
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #666), color-stop(.25, transparent)), 
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #666)), 
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #666));
background-image: -webkit-linear-gradient(45deg, #666 25%, transparent 25%), 
-webkit-linear-gradient(-45deg, #666 25%, transparent 25%), 
-webkit-linear-gradient(45deg, transparent 75%, #666 75%), 
-webkit-linear-gradient(-45deg, transparent 75%, #666 75%);
background-image: -o-linear-gradient(45deg, #666 25%, transparent 25%), 
-o-linear-gradient(-45deg, #666 25%, transparent 25%), 
-o-linear-gradient(45deg, transparent 75%, #666 75%), 
-o-linear-gradient(-45deg, transparent 75%, #666 75%);
background-image: linear-gradient(45deg, #666 25%, transparent 25%), 
linear-gradient(-45deg, #666 25%, transparent 25%), 
linear-gradient(45deg, transparent 75%, #666 75%), 
linear-gradient(-45deg, transparent 75%, #666 75%);
-moz-background-size: 2px 2px;
background-size: 2px 2px;
-webkit-background-size: 2px 2.1px; /* override value for webkit */
background-position: 0 0, 1px 0, 1px -1px, 0px 1px;
}

jsfiddle exemple

Le "clignotement" vous observez, c'est n'est pas une question de logiciel, mais un matériel un. Fondamentalement, il est causé par le fait que les pixels sur votre écran ne peut pas changer instantanément de couleur. Depuis votre parsemée d'arrière-plan est constitué d'une alternance de rangées de pixels, chaque fois que vous faites défiler vers le bas par un nombre impair de pixels, il y aura un bref instant lorsque votre écran est la commutation entre les deux décalé copies du motif, et cela apparaîtra comme un scintillement.

Ce fil de discussion sur la Conception Graphique de la Pile d'Échange dispose d'une encore plus spectaculaire exemple de la même effet, et explique aussi pourquoi c'est le cas pour plus de détails. Juste pour une démonstration rapide, permettez-moi d'emprunter l'une des images de Volker Siegel répondre:

Notez comment, sur la plupart des écrans, cette image le montre d'une remarquable "impulsions" effet lors du défilé. (Il peut également apparaître à clignoter un peu, même alors que rien qu'en les regardant, tout simplement parce que les photorécepteurs dans vos yeux ont aussi un certain retard de réponse et d'adaptation à ses effets.)

De toute façon, la seule façon, vous pouvez arrêter votre parsemée d'arrière-plan de scintillement pendant le défilement est à font pas défiler. Heureusement, il existe une propriété CSS juste pour ça:

background-attachment: fixed;

Autre que cela, il n'y a pas grand-chose pour elle. La meilleure façon de rendre l'arrière-plan est presque certainement avec un simple de deux couleurs d'image PNG. Vous pouvez même faire de l'image semi-transparent, de sorte que vous pouvez couche sur le dessus de différents fonds de couleur. Voir l'extrait de code ci-dessous pour une démonstration:

CSS:

body {
background-color: white;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGUlEQVQ4y2NgoBJwoJAedcGoC0ZdMOAuAABF0hABJ/8lyQAAAABJRU5ErkJggg==);
background-attachment: fixed;
}

HTML:

<p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p>
<p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p>
<p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p>
<p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p>

Notez comment le modèle ne clignote pas lorsque vous faites défiler avec l'intérieur de la barre de défilement. (Il ne scintillement lorsque vous faites défiler la toute la page, parce que le modèle est joint à la <iframe> il est affiché, et défilera avec elle.)

^{(BTW, l'image en ligne que j'ai utilisé dans l'extrait ci-dessus est de 16 × 16 pixels, même si le motif n'est que de 2 × 2 pixels. Répéter quelques fois ne coûtera pas beaucoup en termes de taille de fichier, cependant, et peut-être légèrement plus en sécurité, car je me souviens de certains anciens navigateurs d'avoir des problèmes avec de très petites images d'arrière-plan.)}

C'est la raison de fond de taille, donc, juste essayer ceci:

background-size:2px 2px;