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

Возможно ли это или есть трюк, чтобы сделать фоновый пиксель, подобный таковому в прикрепленном изображении?

Я использую фоновое изображение, но, как вы можете видеть, оно не масштабируется, и оно вспыхивает при прокрутке страницы.

Теперь у меня есть CSS благодаря 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;

Но я не могу сделать это точно так же, как изображение. Кто-нибудь может это проверить?

Приветствуется любой код, ресурс, учебник и предложение.

Ответ 1

Вот лучшее, что я мог придумать, чтобы соответствовать вашему изображению. Это адаптировано из примера здесь Lea Verou. Каким будет ваш резерв для браузеров без 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;
}

Пример jsfiddle

Ответ 2

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

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

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

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

Ответ 3

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

Этот поток в Graphic Design Stack Exchange показывает еще более драматичный пример того же эффекта, а также объясняет, почему это происходит более подробно. Для быстрой демонстрации позвольте мне заимствовать одно из изображений Volker Siegel answer:

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

В любом случае, единственный способ остановить ваш пунктирный фон от мерцания при прокрутке - сделать его не прокруткой. К счастью, для этого есть свойство 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>

Ответ 4

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

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

Ответ 5

Это связано с размером фона, поэтому просто попробуйте следующее:

background-size:2px 2px;

Ответ 6

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

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

Ответ 7

http://www.patternify.com/ Попробуйте этот сайт. Вы можете создать фон и использовать его.