CSS-CSS3 пиксельный точечный фон

из комментария thirtydot в первом посте. Должен был опубликовать его как ответ-блестящий. Я чуть не пропустил его. пожалуйста, оцените его комментарий:) Я только публикую это как ответ, чтобы это могло помочь другим, как это помогло мне.

использование сообщения в кодировке base64:

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

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

"мерцание", которое вы наблюдаете, - это не проблема программного обеспечения, а проблема аппаратного обеспечения. В принципе, это вызвано тем фактом, что пиксели на экране не могут мгновенно менять цвет. Поскольку ваш пунктирный фон состоит из чередующихся строк пикселей, каждый раз, когда вы прокручиваете вниз по нечетное число пикселей, будет короткий момент, когда ваш экран переключается между двумя сдвинутыми копиями шаблона, и это будет отображаться как мерцание.

эта тема на Графический Дизайн Stack Exchange имеет еще более драматический пример того же эффекта, а также объясняет, почему это происходит более подробно. Просто для быстрой демонстрации, позвольте мне одолжить одно из изображений из ответ Волкера Сигела:

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

в любом случае, единственный способ остановить пунктирный фон от мерцания во время прокрутки -сделать это не свиток. к счастью, есть свойство CSS только для этого:

background-attachment: fixed;

кроме этого, больше ничего нет. Лучший способ фактически отобразить фон почти наверняка с помощью простого двухцветного изображения PNG. Вы даже можете сделайте изображение полупрозрачным, чтобы вы могли накладывать его поверх разных цветных фонов. См. фрагмент ниже для демонстрации:

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>

обратите внимание, как шаблон не мерцает при прокрутке его с помощью внутренней полосы прокрутки. (Это тут мерцание при прокрутке всей страницы SO, потому что шаблон прикреплен к <iframe> это отображается и прокручивается вместе с ним.)

^{(кстати, встроенные изображения, которые я использовал в приведенном выше фрагменте составляет 16 × 16 пикселей, хотя сам узор всего 2 × 2 пикселя. Повторение его несколько раз не стоит много с точки зрения размера файла, хотя, и может быть немного безопаснее, так как я, кажется, помню некоторые старые браузеры, имеющие проблемы с очень маленькими фоновыми изображениями.)}

как насчет этого?

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

В общем формула

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

как видно @ https://codepen.io/edmundojr/pen/xOYJGw

Это из-за размера фона, поэтому просто попробуйте это:

background-size:2px 2px;

без всех префиксов браузера:

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