背景像素化

问题描述：

我正在寻找像这样的背景效果（在纯CSS中），我该如何做到这一点？背景像素化

（缩放图像）

代码：

html, 
 
body { 
 
    height:100%; 
 
    background-color:#3D3D3D; 
 
    display:flex; 
 
} 
 

 
div { 
 
    height: 100px; 
 
    width:100px; 
 
    margin:10px auto; 
 
    background-image: linear-gradient(45deg, #868686 25%, transparent 25%, transparent 75%, #868686 75%, #868686), linear-gradient(45deg, #868686 25%, transparent 25%, transparent 75%, #868686 75%, #868686); 
 
    background-position: 0 0, 51px 51px; 
 
    background-color: #222222; 
 
    background-size: 2px 2px; 
 
}

<div></div>

答

这里是纯CSS溶液创建4 linear-gradients像这样与repeat-x和适当的定位。

body { 
 
    margin: 0; 
 
    height: 100vh; 
 
    background: 
 
    linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0/50px 25px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0/50px 50px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0/50px 75px repeat-x, 
 
    linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0/50px 100px repeat-x; 
 
}

然后重复linear-gradient很多很多次。演示：

body { 
 
    margin: 0; 
 
    height: 100vh; 
 
    background: 
 
    linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0/50px 25px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0/50px 50px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0/50px 75px repeat-x, 
 
    linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0/50px 100px repeat-x, 
 
    linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0/50px 125px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0/50px 150px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0/50px 175px repeat-x, 
 
    linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0/50px 200px repeat-x, 
 
    linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0/50px 225px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0/50px 250px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0/50px 275px repeat-x, 
 
    linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0/50px 300px repeat-x, 
 
    linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0/50px 325px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0/50px 350px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0/50px 375px repeat-x, 
 
    linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0/50px 400px repeat-x, 
 
    linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0/50px 425px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0/50px 450px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0/50px 475px repeat-x, 
 
    linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0/50px 500px repeat-x, 
 
    linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0/50px 525px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0/50px 550px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0/50px 575px repeat-x, 
 
    linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0/50px 600px repeat-x, 
 
    linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0/50px 625px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0/50px 650px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0/50px 675px repeat-x, 
 
    linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0/50px 700px repeat-x, 
 
    linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0/50px 725px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0/50px 750px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0/50px 775px repeat-x, 
 
    linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0/50px 800px repeat-x, 
 
    linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0/50px 825px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0/50px 850px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0/50px 875px repeat-x, 
 
    linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0/50px 900px repeat-x, 
 
    linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0/50px 925px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0/50px 950px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0/50px 975px repeat-x, 
 
    linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0/50px 1000px repeat-x, 
 
    linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0/50px 1025px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0/50px 1050px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0/50px 1075px repeat-x, 
 
    linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0/50px 1100px repeat-x, 
 
    linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0/50px 1125px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0/50px 1150px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0/50px 1175px repeat-x, 
 
    linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0/50px 1200px repeat-x, 
 
    linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0/50px 1225px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0/50px 1250px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0/50px 1275px repeat-x, 
 
    linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0/50px 1300px repeat-x; 
 
    /* and so on */ 
 
}

当然你也可以使用任何编程语言或一些CSS预处理程序来生成这个怪物的CSS属性。

但说实话我会用8个方格的东西使用SVG。演示：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 40"> 
 
    <rect x="0" y="0" width="10" height="10" fill="#868686"/> 
 
    <rect x="10" y="0" width="10" height="10" fill="#3d3d3d"/> 
 
    <rect x="0" y="10" width="10" height="10" fill="#3d3d3d"/> 
 
    <rect x="10" y="10" width="10" height="10" fill="#222"/> 
 
    <rect x="0" y="20" width="10" height="10" fill="#3d3d3d"/> 
 
    <rect x="10" y="20" width="10" height="10" fill="#868686"/> 
 
    <rect x="0" y="30" width="10" height="10" fill="#222"/> 
 
    <rect x="10" y="30" width="10" height="10" fill="#3d3d3d"/> 
 
</svg>

演示与SVG（仅适用于Chrome浏览器，你需要使用外部SVG（首选方法）或逃生SVG标记）：

body { 
 
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 40"><rect x="0" y="0" width="10" height="10" fill="#868686"/><rect x="10" y="0" width="10" height="10" fill="#3d3d3d"/><rect x="0" y="10" width="10" height="10" fill="#3d3d3d"/><rect x="10" y="10" width="10" height="10" fill="#222"/><rect x="0" y="20" width="10" height="10" fill="#3d3d3d"/><rect x="10" y="20" width="10" height="10" fill="#868686"/><rect x="0" y="30" width="10" height="10" fill="#222"/><rect x="10" y="30" width="10" height="10" fill="#3d3d3d"/></svg>') 0 0/40px 80px repeat; 
 
}

演示与逃脱联SVG，作品无处不在，但不维护：

body { 
 
    background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2020%2040%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%23868686%22/%3E%3Crect%20x%3D%2210%22%20y%3D%220%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%233d3d3d%22/%3E%3Crect%20x%3D%220%22%20y%3D%2210%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%233d3d3d%22/%3E%3Crect%20x%3D%2210%22%20y%3D%2210%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%23222%22/%3E%3Crect%20x%3D%220%22%20y%3D%2220%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%233d3d3d%22/%3E%3Crect%20x%3D%2210%22%20y%3D%2220%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%23868686%22/%3E%3Crect%20x%3D%220%22%20y%3D%2230%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%23222%22/%3E%3Crect%20x%3D%2210%22%20y%3D%2230%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%233d3d3d%22/%3E%3C/svg%3E') 0 0/40px 80px repeat; 
 
}

当时在等待答案，并试图喽！这个很酷！ –

哇，优良的答案:)谢谢 – EyWN

@EyWN有了一大乐事！ –

答

选项1：更容易，更灵活和更高效的使用base64，您可以使用http://www.patternify.com（或类似产品）轻松生成该base64。将生成一个base64，您可以使用repeat作为background-image URL来实现。

选项2：来自CSS3 Pie的CSS唯一解决方案。根据需要调整颜色。

body { 
 
    margin: 0; 
 
} 
 
div { 
 
    padding: 100vh 100vw 0 0; 
 
    background: -webkit-linear-gradient(63deg, #151515 5px, transparent 5px) 0 5px, 
 
       -webkit-linear-gradient(243deg, #151515 5px, transparent 5px) 10px 0px, 
 
       -webkit-linear-gradient(63deg, #222 5px, transparent 5px) 0px 10px, 
 
       -webkit-linear-gradient(243deg, #222 5px, transparent 5px) 10px 5px, 
 
       -webkit-linear-gradient(0deg, #1b1b1b 10px, transparent 10px), 
 
       -webkit-linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424); 
 
    background: -moz-linear-gradient(63deg, #151515 5px, transparent 5px) 0 5px, 
 
       -moz-linear-gradient(243deg, #151515 5px, transparent 5px) 10px 0px, 
 
       -moz-linear-gradient(63deg, #222 5px, transparent 5px) 0px 10px, 
 
       -moz-linear-gradient(243deg, #222 5px, transparent 5px) 10px 5px, 
 
       -moz-linear-gradient(0deg, #1b1b1b 10px, transparent 10px), 
 
       -moz-linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424); 
 
    background: linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px, 
 
       linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px, 
 
       linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px, 
 
       linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px, 
 
       linear-gradient(90deg, #1b1b1b 10px, transparent 10px), 
 
       linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424); 
 
    background-size: 20px 20px; 
 
    background-color: #131313; 
 
    -pie-background: linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px/20px, 
 
        linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px/20px, 
 
        linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px/20px, 
 
        linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px/20px, 
 
        linear-gradient(90deg, #1b1b1b 10px, transparent 10px) 0 0/20px, 
 
        linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424) 
 
        0 0/20px #131313; 
 
}

<div></div>

来源：http://css3pie.com/demos/gradient-patterns/

不知道为什么向下选票。 Base64编码>渐变。 –

答

不完全必要的背景，但我想它是简单和易于使用。

div{ 
 
    position: absolute; 
 
    width: 200px; 
 
    height: 200px; 
 
    background: -webkit-repeating-linear-gradient(180deg, transparent, #868686 10%, #fff 10%); 
 
    background-color: #222222; 
 
} 
 

 
div.last{ 
 
    background: -webkit-repeating-linear-gradient(transparent, #868686 10%, #fff 10%); 
 
}

<div></div> 
 
<div class="last"></div>

相关推荐