Повторный фон показывает нежелательную сетку на определенных уровнях масштабирования. - PullRequest
Новая
       66

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

3 голосов
/ 14 июня 2019

На повторяющемся фоне края повторяющихся плиток не совпадают точно на определенных уровнях масштабирования. Это приводит к появлению нежелательных краев, так как в этом промежутке в 1 пиксель виден цвет фона.

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

Слегка перекрывающиеся фоновые плитки могут работать, но я не уверен, как этого можно добиться с помощью повторного фона. Отключение зума - это еще один вариант, но я бы хотел предотвратить это, если это возможно.

Код, как показано ниже, показывает проблему в Chrome при установке увеличения на 85% (или даже хуже на 63%): 

#header {
  background: linear-gradient(135deg, #ECEDDC 24.9%, transparent 25.1%) -70px 0,
              linear-gradient(225deg, #ECEDDC 24.9%, transparent 25.1%) -70px 0,
              linear-gradient(315deg, #ECEDDC 24.9%, transparent 25.1%),
              linear-gradient(45deg, #ECEDDC 24.9%, transparent 25.1%);
  background-size: 140px 140px;
  background-color: #29AB87;
  width: 100vw;
  height: 100vh;
}
<div id="header"></div>

Снимок экрана с вопросом:

enter image description here

Ответы [ 2 ]

3 голосов
/ 14 июня 2019

Вот другая идея создать это, используя conic-gradient(), который может уменьшить этот плохой эффект, поскольку мы будем полагаться только на два градиента, но на самом деле это поддерживается только в chrome 

body {
  background: 
   conic-gradient(
    #ECEDDC 0 0.125turn,
    transparent 0.126turn 0.874turn,
    #ECEDDC 0.875turn 1turn),
   conic-gradient(
    transparent 0 0.375turn,
    #ECEDDC 0.376turn 0.624turn,
    transparent 0.625turn 1turn) 70px 0.8px,
   #29AB87;

  background-size: 140px 140px;
  margin:0;
  height: 100vh;
}

Вы заметите, что я использую небольшую разницу 0.001turn в цветовых ограничителях, чтобы избежать неровных краев, и я также перевел второй градиент на 0.8px, чтобы создать небольшое перекрытие и избежать пропусков.

Для лучшей поддержки и лучшего рендеринга рассмотрите SVG, как показано ниже: 

body {
  background: 
   url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" ><polygon fill="%23ECEDDC" points="0,0  20,0  10,10"/></svg>'), 
   url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" ><polygon fill="%23ECEDDC" points="0,20 20,20 10,10"/></svg>') 70px 0,
   #29AB87;

  background-size: 140px 140px;
  margin:0;
  height: 100vh;
}
2 голосов
/ 14 июня 2019

Использование полной страницы SVG с внутренним повторяющимся узором кажется наиболее плавным 

html, body {  margin: 0; }
svg { position: absolute; }
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">  
  <pattern id="p1" width="10" height="10" patternUnits="userSpaceOnUse"  >
    <polygon points="0,0 5,5 10,0 10,5 5,10, 0,5" fill="#ECEDDC" /> 
  </pattern>
 
  <rect width="100%" height="100%" fill="#29AB87"  />
  <rect width="100%" height="100%" fill="url(#p1)" />
</svg>
...