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

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

使用 base64 编码的消息:

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

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