CSS - CSS3 像素化点背景

Question

是否有可能或有技巧使背景像所附图像中的那样像素化？

我使用了背景图片，但正如您所见，它不会缩放，并且会在页面滚动时闪烁。

感谢 vlcekmi3，我现在有了 CSS：

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;

但我无法让它与图片完全一样。有人可以查一下吗？

感谢任何代码、资源、教程和建议。

Answer 1

这个怎么样？

.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

Answer 2

没有所有浏览器前缀：

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

Answer 3

您观察到的“闪烁”不是软件问题，而是硬件问题。基本上，这是因为屏幕上的像素不能立即改变颜色。由于您的虚线背景由交替的像素行组成，因此每当您向下滚动奇数个像素时，您的屏幕都会有一个短暂的时刻在图案的两个移动副本之间切换，并且这将显示为闪烁。

This thread on Graphic Design Stack Exchange 提供了一个更加戏剧性的相同效果示例，并更详细地解释了为什么会发生这种情况。只是为了快速演示，借用Volker Siegel's answer的一张图片：

请注意，在大多数屏幕上，此图像在滚动时会显示出明显的“脉动”效果。 （即使只是看着它，它也可能会出现一点闪烁，这仅仅是因为你眼睛中的光感受器也有一些反应延迟和适应效应。）

无论如何，在滚动时阻止虚线背景闪烁的唯一方法是让它不滚动。幸运的是，there's a CSS property just for that：

background-attachment: fixed;

除此之外，没有什么其他的了。实际渲染背景的最佳方式几乎可以肯定是使用简单的双色 PNG 图像。您甚至可以使图像半透明，以便将其叠加在不同颜色的背景之上。请参阅下面的 sn-p 进行演示：

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>，并且会随之滚动。）

^{(顺便说一句，我在上面的 sn-p 中使用的内联图像是 16 × 16 像素，尽管实际图案只有 2 × 2 像素。重复几次并不需要太多成本不过，就文件大小而言，可能会更安全一些，因为我似乎记得一些较旧的浏览器存在背景图像非常小的问题。）}

Answer 4

这是因为背景大小，所以试试这个：

background-size:2px 2px;

Answer 5

这是我能想到的与您的形象相匹配的最佳选择。它改编自 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 example

Answer 6

来自三十点在第一篇文章中的评论。应该将其发布为答案 - 太棒了。我差点错过了。 请评价他的评论 :) 我只是将其发布为答案，因此它可能会帮助其他人，因为它帮助了我。

使用 base64 编码的消息：

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

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