CSS - CSS3像素点背景

问题描述：

是否有可能或者有一个窍门使图像附加的背景像素化？

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.

现在我有CSS感谢vlcekmi3：

Now I have CSS thanks to vlcekmi3:

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.

答

这里是我最好的出现，以匹配你的形象。它是从这里的示例改编的 Lea Verou 什么将是您的回退为非css3浏览器？

Here's the best I could come up with to match your image. It's adapted from the example here by Lea Verou What will be your fallback for non css3 browsers?

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示例

CSS - CSS3像素点背景

相关推荐