web-dev-qa-db-fra.com

Motif de damier dégradé CSS

Je veux créer un motif en damier à l'aide de dégradés. J'ai trouvé un exemple et l'ai modifié selon mes besoins, mais il ne fonctionne qu'avec le préfixe -moz. Lorsque je supprime le préfixe -moz, Le modèle est complètement différent. comparison of patterns : normal vs. -moz

Comment puis-je faire fonctionner ce motif en damier -moz Avec linear-gradient Non préfixé?

body {
  background-image:
  linear-gradient(45deg, #808080 25%, transparent 25%), 
  linear-gradient(-45deg, #808080 25%, transparent 25%),
  linear-gradient(45deg, transparent 75%, #808080 75%),
  linear-gradient(-45deg, transparent 75%, #808080 75%);

  background-size:20px 20px;    
  background-position:0 0, 10px 0, 10px -10px, 0px 10px;
}
csscss3gradientlinear-gradients
26
Maciej Krawczyk

Modifiez simplement le background-position comme dans l'extrait ci-dessous pour obtenir la sortie requise. Cela fonctionne bien dans Firefox, Chrome, Opera, IE11 et Edge.

body {
  background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

Le problème semble se produire en raison d'une différence dans la façon dont les angles sont traités par le -moz gradient linéaire et standard. -45deg dans le -moz le gradient linéaire semble être égal à 135deg dans le dégradé standard ( mais changer l'angle donne un étrange point au milieu).

Les captures d'écran ci-dessous montrent la différence (toutes deux prises dans la dernière version de Firefox v44.0).

Sortie avec -moz-gradient-linéaire:

enter image description here

Sortie avec gradient linéaire:

enter image description here

59
Harry

La version 45deg fonctionne bien, mais peut finir par montrer une ligne entre les triangles à différents niveaux de zoom ou sur des écrans de rétine. Selon les navigateurs que vous devez prendre en charge, vous pouvez également utiliser background-blend-mode: difference ( caniuse montre actuellement près de 90% de support), vous pouvez teinter les chèques en utilisant une image de fond supplémentaire:

body {
    background-image: /* tint image */
                      linear-gradient(to right, rgba(192, 192, 192, 0.75), rgba(192, 192, 192, 0.75)),
                      /* checkered effect */
                      linear-gradient(to right, black 50%, white 50%),
                      linear-gradient(to bottom, black 50%, white 50%);
    background-blend-mode: normal, difference, normal;
    background-size: 2em 2em;
}
13
pmccloghrylaing

Il s'agit de l'implémentation de Chrome lorsque vous avez ouvert une image avec transparence pendant un certain temps (bien qu'ils l'aient ensuite supprimée au profit de l'utilisation d'un arrière-plan uni).

element {
    background-position: 0px 0px, 10px 10px;
    background-size: 20px 20px;
    background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%),linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);
}
3
Grant Gryczan

Merci Harry pour l'inspiration - voici un mix scss pour faire ça

@mixin checkers($size: 50px, $contrast: 0.07) {
  $checkerColor: rgba(#000, $contrast);
  $angle: 45deg;
  $tp: 25%;

  background-image: linear-gradient($angle, $checkerColor $tp, transparent $tp),
    linear-gradient(-$angle, $checkerColor $tp, transparent $tp),
    linear-gradient($angle, transparent 3 * $tp, $checkerColor 3 * $tp),
    linear-gradient(-$angle, transparent 3 * $tp, $checkerColor 3 * $tp);
  background-size: $size $size;
  background-position: 0 0, 0 $size/2, $size/2 -1 * $size/2, -1 * $size/2 0;
}
0
Stephen