Шаблон градиента CSS-градиента

Я хочу создать шаблон шахматной доски с использованием градиентов. Я нашел пример и изменил его в соответствии с моими потребностями, однако он работает только с префиксом -moz. Когда я удаляю префикс -moz, шаблон полностью отличается.

Как я могу сделать этот шаблон шаблона -moz работать с unprefixed linear-gradient?

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

Ответы

Ответ 1

Просто измените background-position, как в приведенном ниже фрагменте, чтобы получить требуемый вывод. Это отлично работает в Firefox, Chrome, Opera, IE11 и 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;
}

Ответ 2

45-градусная версия работает хорошо, но может в конечном итоге показать линию между треугольниками при разных уровнях масштабирования или на экранах сетчатки. В зависимости от того, какие браузеры вам нужно поддерживать, вы также можете использовать background-blend-mode: difference (в настоящее время caniuse поддерживает почти 90%), вы можете подкрасить чеки, используя дополнительное фоновое изображение:

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

Ответ 3

Это была реализация Chrome, когда вы какое-то время открывали изображение с прозрачностью (хотя позже они удалили его в пользу только сплошного фона).

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

Ответ 4

Спасибо Гарри за вдохновение - здесь Scss Mixin, чтобы сделать это

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