27

是否有可能或者是否有一种技巧可以使背景像素化，就像所附图像中的那样？

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

在此处输入图像描述

感谢 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;

但我无法让它完全像图像。有人可以检查吗？

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

4

6 回答 6

68

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

使用 base64 编码的消息：

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

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

于 2013-07-27T01:26:41.570 回答
31

这是我能想到的与您的图像相匹配的最佳方法。它改编自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 示例

于 2012-11-28T16:14:33.477 回答
9

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

Graphic Design Stack Exchange 上的这个线程以一个更加戏剧性的相同效果示例为特色，并更详细地解释了它发生的原因。只是为了快速演示，让我借用Volker Siegel 的回答中的一张图片：

西门子之星

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

无论如何，在滚动时阻止虚线背景闪烁的唯一方法是让它不滚动。 幸运的是，有一个 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 像素。但是，在文件大小方面重复几次并不会花费太多，并且可能会稍微安全一些，因为我似乎记得一些较旧的浏览器存在非常小的背景图像问题。）

于 2015-08-17T22:24:55.240 回答
7

这个怎么样？

.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

于 2018-04-03T17:35:13.423 回答
0

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

background-size:2px 2px;
于 2013-12-06T12:08:45.110 回答
0

没有所有浏览器前缀：

background: linear-gradient(
    45deg,
    #fff,
    #fff 50%,
    #000 50%,
    #000
);
background-size: 2px 2px;
于 2017-08-15T19:35:37.920 回答