web-dev-qa-db-fra.com

CSS - Arrière-plan pixelisé CSS3

Est-il possible ou existe-t-il un truc pour créer un fond pixelisé comme celui de l'image jointe?

J'utilise une image d'arrière-plan, mais comme vous pouvez le constater, elle n'est pas à l'échelle et clignote au défilement des pages.

Enter image description here

Maintenant, j'ai CSS grâce à vlcekmi3:

background-color: white;
background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
    linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-size:100px 100px;
background-position: 0 0, 50px 50px;

Mais je suis incapable de faire exactement comme l'image. Quelqu'un peut-il vérifier?

Tous les codes, ressources, tutoriels et suggestions sont les bienvenus.

csscss3backgroundpixelate
19
itsme

Voici le meilleur que je pourrais trouver pour correspondre à votre image. C'est adapté de l'exemple ici présenté par Lea Verou Quelle sera votre solution de rechange pour les navigateurs non css3?

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

exemple jsfiddle

24
James South

Du commentaire de Thirtydot dans le premier post. Aurait dû l'afficher comme une réponse - Brilliant. Ça m'a presque manqué. Merci d'évaluer son commentaire :) Je ne fais que poster ceci comme réponse, cela pourrait donc aider les autres comme cela m'a aidé.

Utilisation d'un message codé en base64:

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABZJREFUeNpi2r9//38gYGAEESAAEGAAasgJOgzOKCoAAAAASUVORK5CYII=);

http://jsfiddle.net/thirtydot/v7T98/3/

58
Onimusha

Le "scintillement" que vous observez n’est pas un problème logiciel, mais un problème matériel. En gros, cela est dû au fait que les pixels de votre écran ne peuvent pas changer de couleur instantanément. Étant donné que votre arrière-plan en pointillés consiste en une alternance de rangées de pixels, chaque fois que vous faites défiler un nombre impair de pixels, il se produira un bref instant lorsque votre écran basculera entre deux copies décalées du motif comme scintillement.

Ce fil de discussion sur Graphic Design Stack Exchange présente un exemple encore plus dramatique du même effet, et explique également pourquoi cela se produit plus en détail. Juste pour une démonstration rapide, permettez-moi d’emprunter une des images de Réponse de Volker Siegel :

 Siemens Star

Notez que, sur la plupart des écrans, cette image affiche un effet "pulsé" perceptible lorsqu’il fait défiler. (Il peut également sembler qu'il clignote un peu en le regardant, tout simplement parce que les photorécepteurs dans vos yeux ont également des effets de retard de réponse et d'adaptation.)

Quoi qu'il en soit, le seul moyen d'empêcher votre arrière-plan en pointillés de scintiller pendant le défilement est de ne le faites pas défiler. Heureusement, il existe une propriété CSS juste pour cela :

background-attachment: fixed;

Autre que cela, il n'y a pas grand chose d'autre. Le meilleur moyen de rendre réellement le fond est presque certainement avec une simple image PNG à deux couleurs. Vous pouvez même rendre l'image semi-transparente, de sorte que vous puissiez la superposer à différents arrière-plans de couleurs. Voir l'extrait ci-dessous pour une démonstration:

body {
  background-color: white;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGUlEQVQ4y2NgoBJwoJAedcGoC0ZdMOAuAABF0hABJ/8lyQAAAABJRU5ErkJggg==);
  background-attachment: fixed;
}
<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 que le motif ne scintille pas lorsque vous le faites défiler avec la barre de défilement interne. (Scintille lorsque vous faites défiler toute la page SO, car le motif est associé au <iframe> dans lequel il est affiché et défilera avec.)

(En passant, l'image en ligne que j'ai utilisée dans l'extrait de code ci-dessus mesure 16 × 16 pixels, même si le motif réel ne fait que 2 × 2 pixels. Répéter l'opération plusieurs fois ne coûte pas cher en termes de taille de fichier, cependant, et peut-être un peu plus sûr, car il me semble que certains navigateurs plus anciens ont des problèmes avec de très petites images d'arrière-plan.)

7
Ilmari Karonen

Celui-ci, ça va? 

.card {
  background: linear-gradient(90deg, #fff 2px, transparent 1%) center, linear-gradient(#fff 2px, transparent 1%) center, #ccc;
  background-size: 5px 5px;
  
  height: 10em;
  width: 30em;
  position: relative;
}

.text {
  font-size: 2em;  
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
<div class="card">
  <div class="text">
    Hello world!
  </div>
</div>

En général, la formule est 

// color
$bg-color: #fff;
$dot-color: $gray-darker;

// Dimensions
$dot-size: 3px;
$dot-space: 5px;

background: linear-gradient(90deg, $bg-color ($dot-space - $dot-size), transparent 1%) center,
linear-gradient($bg-color ($dot-space - $dot-size), transparent 1%) center, $dot-color;
background-size: $dot-space $dot-space;

comme vu @ https://codepen.io/edmundojr/pen/xOYJGw

3
Matyas

C'est à cause de la taille de l'arrière-plan, alors essayez ceci:

background-size:2px 2px;
0
Dinnu Buddy

Sans tous les préfixes du navigateur:

background: linear-gradient(
    45deg,
    #fff,
    #fff 50%,
    #000 50%,
    #000
);
background-size: 2px 2px;
0
Devin Price