CSS - фон на пикселирани точки с CSS3

Css Css3 Pixelate Dot Background

Решение:

От коментара на тридесет точки в първия пост. Трябваше да го публикувам като отговор - Брилянтно. Почти пропуснах. Моля, оценете коментара му :) Публикувам това само като отговор, за да може да помогне на другите, както и на мен.

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

фоново изображение: данни: image/png; base64, iVBORw0KGgoAAANU
http://jsfiddle.net/thirtydot/v7T98/3/
 
 
  
Ето най -доброто, което мога да измисля, за да съответства на вашия имидж. Той е адаптиран от примера тук от Lea Verou Какъв ще бъде вашият резервен вариант за браузъри, които не са css3?
 
 
 
тяло {background-image: -moz-linear-gradient (45deg, #666 25%, transparent 25%), -moz-linear-gradient (-45deg, #666 25%, transparent 25%), -moz-linear- градиент (45 градуса, прозрачен 75%, #666 75%), -моз линеен градиент (-45 градуса, прозрачен 75%, #666 75%); фоново изображение: -webkit-градиент (линеен, 0 100%, 100% 0, стоп за цвят (.25, #666), цветен стоп (.25, прозрачен)), -webkit-градиент (линеен, 0 0 , 100% 100%, ограничител на цвета (.25, #666), ограничител на цвета (.25, прозрачен)), -Webkit-градиент (линеен, 0 100%, 100% 0, цветен стоп (.75, прозрачен), ограничител на цвета (.75, #666)), градиент на webkit (линеен, 0 0, 100% 100%, цветен стоп (.75, прозрачен), цветен стоп (.75, #666) ); фоново изображение: -webkit-линеен градиент (45deg, #666 25%, прозрачен 25%), -webkit-линеен градиент (-45deg, #666 25%, прозрачен 25%), -webkit-линеен градиент ( 45 градуса, прозрачен 75%, #666 75%), -webkit-линеен градиент (-45 градуса, прозрачен 75%, #666 75%); фоново изображение: -o-линеен градиент (45 градуса, #666 25%, прозрачен 25%), -o-линеен градиент (-45 градуса, #666 25%, прозрачен 25%), -o-линеен градиент ( 45 градуса, прозрачен 75%, #666 75%), -о-линеен градиент (-45 градуса, прозрачен 75%, #666 75%); фоново изображение: линеен градиент (45 градуса, #666 25%, прозрачен 25%), линеен градиент (-45 градуса, #666 25%, прозрачен 25%), линеен градиент (45 градуса, прозрачен 75%, #666 75 %), линеен градиент (-45 градуса, прозрачен 75%, #666 75%); -moz-background-size: 2px 2px; размер на фона: 2px 2px; -webkit-background-size: 2px 2.1px; / * заменя стойността за webkit */ background -position: 0 0, 1px 0, 1px -1px, 0px 1px; }
пример за jsfiddle
  
„Трептенето“, което наблюдавате, не е софтуерен проблем, а хардуерен. По принцип това се дължи на факта, че пикселите на екрана не могат да променят цвета мигновено. Тъй като вашият пунктиран фон се състои от редуващи се редове пиксели, всеки път, когато превъртате надолу с нечетен брой пиксели , ще има кратък момент, когато екранът ви превключва между две изместени копия на шаблона и това ще се появи като трептене.
 
Тази тема за Exchange на стека за графичен дизайн предлага още по -драматичен пример за същия ефект и също така обяснява защо се случва по -подробно. Само за бърза демонстрация, нека заема едно от изображенията от отговора на Фолкер Зигел:
 
 
 
 
 
Обърнете внимание как на повечето екрани това изображение ще покаже забележим „пулсиращ“ ефект при превъртане. (Може да изглежда и да трепне малко дори само да го гледате, просто защото фоторецепторите в очите ви също имат известно забавяне на реакцията и адаптационни ефекти.)
 
Както и да е, единственият начин да спрете трептенето на вашия пунктиран фон, докато превъртате, е да не го превъртайте. За щастие има CSS свойство само за това:
 
фон-прикачен файл: фиксиран;
Освен това, няма нищо друго в това. Най-добрият начин за рендиране на фона е почти сигурно с просто двуцветно PNG изображение. Можете дори да направите изображението полупрозрачно, така че да можете да го сложите върху различни цветове на фона. Вижте фрагмента по -долу за демонстрация:
 
тяло {background-color: бяло; background-image: url (данни: image/png; base64, iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAA88/9hAAAAGUlEQVQ4y2NgoBJwoJAedcGoC0ZdMOAuAABF0hABJ/8ggQA) фон-прикачен файл: фиксиран; }
бла
бла
бла
бла
бла
бла
 
бла
бла
бла
бла
бла
бла
 
бла
бла
бла
бла
бла
бла
 
бла
бла
бла
бла
бла
бла
 
Обърнете внимание как шаблонът не трепва, когато го превъртите с вътрешната лента за превъртане. (То прави трептене, когато превъртате цялата страница на SO, защото моделът е прикрепен към