CSS - CSS3 像素化点背景
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13607117/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS - CSS3 pixelate dot background
提问by itsme
Is it possible or is there a trick to make a background pixelated like the one in the image attached?
是否有可能或者有什么技巧可以使背景像所附图像中的那样像素化？
I use a background image, but as you can see it doesn't scale and it flashs on page scrolling.
我使用了背景图像，但正如您所看到的，它不会缩放，并且会在页面滚动时闪烁。
Now I have CSS thanks to vlcekmi3:
由于 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;
But I'm unable to make it exactly like the image. Can someone check it?
但我无法使它与图像完全一样。有人可以检查吗？
Any code, resource, tutorial, and suggestion is appreciated.
感谢任何代码、资源、教程和建议。
回答by Onimusha
From thirtydot's comment in the first post. Should have posted it as an answer - Brilliant. I almost missed it. Please rate his comment up :)I am only posting this as an answer so it might help others as it helped me.
来自三十多点在第一篇文章中的评论。应该将其发布为答案 - 很棒。我几乎错过了。请评价他的评论 :)我只是将此作为答案发布，因此它可能会帮助其他人，因为它帮助了我。
Using a base64 encoded message:
使用 base64 编码的消息：
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABZJREFUeNpi2r9//38gYGAEESAAEGAAasgJOgzOKCoAAAAASUVORK5CYII=);
回答by James South
Here's the best I could come up with to match your image. It's adapted from the example here by Lea VerouWhat will be your fallback for non css3 browsers?
这是我能想出的最好的来匹配你的形象。它改编自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;
}
回答by Ilmari Karonen
The "flickering" you observe is is not a software issue, but a hardware one. Basically, it's caused by that fact that the pixels on your screen can't change color instantly. Since your dotted background consists of alternating rows of pixels, any time you scroll down by an odd number of pixels, there will be a brief moment when your screen is switching between two shifted copies of the pattern, and this will appear as flicker.
您观察到的“闪烁”不是软件问题，而是硬件问题。基本上，这是因为屏幕上的像素不能立即改变颜色。由于您的虚线背景由交替的像素行组成，因此每当您向下滚动奇数个像素时，您的屏幕都会有一小段时间在图案的两个移动副本之间切换，这将显示为闪烁。
This thread on Graphic Design Stack Exchangefeatures an even more dramatic example of the same effect, and also explains why it happens in more detail. Just for a quick demonstration, let me borrow one of the images from Volker Siegel's answer:
平面设计堆栈交换上的这个线程提供了一个更戏剧性的相同效果的例子，并且还更详细地解释了为什么会发生这种情况。为了快速演示，让我借用Volker Siegel 的回答中的一张图片：
Note how, on most screens, this image will show a noticeable "pulsing" effect when scrolled. (It may also appear to flicker a bit even while just looking at it, simply because the photoreceptors in your eyes also have some response delay and adaptation effects.)
请注意，在大多数屏幕上，此图像在滚动时会显示出明显的“脉冲”效果。（即使只是看着它，它也可能看起来有点闪烁，仅仅是因为你眼睛中的光感受器也有一些反应延迟和适应效果。）
Anyway, the only way you can stop your dotted background from flickering while scrolling is to make it not scroll.Fortunately, there's a CSS property just for that:
无论如何，在滚动时阻止虚线背景闪烁的唯一方法是使其不滚动。幸运的是，有一个专门用于此的 CSS 属性：
background-attachment: fixed;
Other than that, there's not much else to it. The best way to actually render the background is almost certainly with a simple two-color PNG image. You can even make the image semitransparent, so that you can layer it on top of different colored backgrounds. See the snippet below for a demonstration:
除此之外，没有太多其他的了。实际渲染背景的最佳方法几乎肯定是使用简单的两色 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>Note how the pattern does not flicker when you scroll it with the inner scroll bar. (It doesflicker when you scroll the whole SO page, because the pattern is attached to the <iframe>it's displayed in, and will scroll along with it.)
请注意，当您使用内部滚动条滚动时，图案不会闪烁。（当您滚动整个 SO 页面时它会闪烁，因为该模式附加到<iframe>它所显示的内容上，并且会随之滚动。）
(BTW, the inline image I've used in the snippet above is 16 × 16 pixels, even though the actual pattern is just 2 × 2 pixels. Repeating it a few times doesn't cost much in terms of file size, though, and might be slightly safer, as I seem to recall some older browsers having issues with very small background images.)
（顺便说一句，我在上面的代码片段中使用的内嵌图像是 16 × 16 像素，即使实际图案只有 2 × 2 像素。尽管重复几次不会在文件大小方面花费太多，并且可能稍微安全一些，因为我似乎记得一些旧的浏览器在背景图像非常小的情况下存在问题。）
回答by Matyas
How about this one?
这个怎么样？
.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>In general the formula is
一般来说，公式是
// 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;
as seen @ https://codepen.io/edmundojr/pen/xOYJGw
回答by Devin Price
Without all the browser prefixes:
没有所有浏览器前缀：
background: linear-gradient(
45deg,
#fff,
#fff 50%,
#000 50%,
#000
);
background-size: 2px 2px;
回答by Dinnu Buddy
This is because of background-size, so just try this:
这是因为背景大小，所以试试这个：
background-size:2px 2px;
