HTML – 背景像素化

概述我正在寻找这样的背景效果(在纯CSS中),我该怎么做？ (缩放图像) 码： html,body { height:100%; background-color:#3D3D3D; display:flex;}div { height: 100px; width:100px; margin:10px auto; background-image: linear-gr 我正在寻找这样的背景效果(在纯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);  background-position: 0 0,51px 51px;  background-color: #222222;  background-size: 2px 2px;}

<div></div>

解决方法 这里是纯CSS解决方案,使用repeat-x和适当的定位创建4个这样的线性渐变.

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,#868686 50%) 0 0 / 50px 75px repeat-x,#222 50%,#3d3d3d 50%) 0 0 / 50px 100px repeat-x;}

然后多次重复线性渐变.演示：

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

当然,您可以使用任何编程语言或一些CSS预处理器来生成此怪物CSS属性.

但说实话,我会使用SVG来制作8个正方形的东西.演示：

<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;}

总结

以上是内存溢出为你收集整理的HTML – 背景像素化全部内容，希望文章能够帮你解决HTML – 背景像素化所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。