CSS – CSS3像素点点背景

前端之家收集整理的这篇文章主要介绍了CSS – CSS3像素点点背景前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
是否有可能使像背景像素像的贴图像一样?

我使用背景图像,但是您可以看到它不缩放,并在页面滚动时闪烁。

现在我有CSS感谢vlcekmi3:

background-color: white;
background-image: linear-gradient(45deg,black 25%,transparent 25%,transparent 75%,black 75%,black),linear-gradient(45deg,black);
background-size:100px 100px;
background-position: 0 0,50px 50px;

但我无法使其完全像图像。有人可以检查吗?

任何代码,资源,教程和建议是赞赏。

解决方法

这是我可以想出来匹配你的形象的最好的。这是从 Lea Verou的例子改编对于非css3浏览器将会是什么?
body {
    background-image: -moz-linear-gradient(45deg,#666 25%,transparent 25%),-moz-linear-gradient(-45deg,-moz-linear-gradient(45deg,#666 75%),#666 75%);
    background-image: -webkit-gradient(linear,0 100%,100% 0,color-stop(.25,#666),transparent)),-webkit-gradient(linear,0 0,100% 100%,color-stop(.75,transparent),#666)),#666));
    background-image: -webkit-linear-gradient(45deg,-webkit-linear-gradient(-45deg,-webkit-linear-gradient(45deg,#666 75%);
    background-image: -o-linear-gradient(45deg,-o-linear-gradient(-45deg,-o-linear-gradient(45deg,#666 75%);
    background-image: linear-gradient(45deg,linear-gradient(-45deg,#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

原文链接:https://www.f2er.com/css/218350.html

猜你在找的CSS相关文章