css网格背景效果
1、【桌布效果】
把多个渐变图案组合起来，让它们透过彼此的透明区域显现时，就会形成各种网格。例如，把水平和垂直的条纹叠加起来，得到桌布图案
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .cc{ width: 200px; height: 70px; background: white; background-image: linear-gradient(90deg,rgba(200,0,0,.5) 50%, transparent 0),linear-gradient(rgba(200,0,0,.5) 50%, transparent 0); background-size: 30px 30px; } </style> </head> <body> <div class="cc"></div> </body> </html> 
2、【图纸辅助线】
某些情况下，希望网格中每个格子的大小可以调整，而网格线条的粗细同时保持固定。例如，类似图纸辅助线的网格
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .cc{ width: 200px; height: 70px; background: #58a; background-image: linear-gradient(90deg,white 1px, transparent 0),linear-gradient(white 1px, transparent 0); background-size: 30px 30px; } </style> </head> <body> <div class="cc"></div> </body> </html> 
3、【蓝图网格】
甚至可以把两幅不同线宽、不同颜色的网格图案叠加起来，得到一个更加逼真的蓝图网格
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .cc{ width: 200px; height: 70px; background: #58a; background-image: linear-gradient(90deg,white 2px, transparent 0),linear-gradient(white 2px, transparent 0),linear-gradient(90deg,hsla(0,0%,100%,0.3) 1px, transparent 0),linear-gradient(hsla(0,0%,100%,0.3) 1px, transparent 0); background-size: 75px 75px,75px 75px,15px 15px,15px 15px; } </style> </head> <body> <div class="cc"></div> </body> </html> 
4、波点背景
【圆点阵列】
前面，一直在用线性渐变生成图案。但是，径向渐变同样也是非常实用的，因为它允许创建圆形、椭圆，或是它们的一部分。径向渐变能够创建的最简单的图案是圆点阵列
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .cc{ width: 200px; height: 70px; background: #655; background-image: radial-gradient(tan 30%,transparent 0); background-size: 30px 30px; } </style> </head> <body> <div class="cc"></div> </body> </html> 
【波点图案】
可以生成两层圆点阵列图案，并把它们的背景定位错开，这样就可以得到真正的波点图案
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .cc{ width: 200px; height: 70px; background: #655; background-image: radial-gradient(tan 30%,transparent 0),radial-gradient(tan 30%,transparent 0); background-size: 30px 30px; background-position: 0 0 ,15px 15px; } </style> </head> <body> <div class="cc"></div> </body> </html> 
棋盘背景
棋盘图案在很多场景下都会用到。比如说，相对于单调的纯色背景来说，具有细微对比度的棋盘图案可能就是一个有趣的替代品。在各种应用程序的界面中，灰色的棋盘图案已经是用于表示透明色的事实标准
css
background:#eee; background-image: linear-gradient(45deg,#bbb 25%,transparent 0),linear-gradient(45deg,transparent 75%,#bbb 0),linear-gradient(45deg,#bbb 25%,transparent 0),linear-gradient(45deg,transparent 75%,#bbb 0); background-size: 30px 30px; background-position: 0 0 ,15px 15px,15px 15px,30px 30px;
这段代码还可以稍稍优化，可以把这些处在贴片顶角的三角形两两组合起来(即把第一组和第二组合并为一层渐变，把第三组和第四组合并为一层渐变)，然后还可以把深灰色改成半透明的黑色——这样只需要修改底色就可以改变整个棋盘的色调，不需要单独调整各层渐变的色标了
background:#eee; background-image: linear-gradient(45deg,rgba(0,0,0,0.25) 25%,transparent 0,transparent 75%,rgba(0,0,0,0.25) 0),linear-gradient(45deg,rgba(0,0,0,0.25) 25%,transparent 0,transparent 75%,rgba(0,0,0,0.25) 0); background-size: 30px 30px; background-position: 0 0 ,15px 15px;
下面来使用SASS的mixin来简化代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .cc{ width: 200px; height: 70px; background: #eee; background-image: linear-gradient(45deg,rgba(0,0,0,0.25) 25%,transparent 0,transparent 75%,rgba(0,0,0,0.25) 0),linear-gradient(45deg,rgba(0,0,0,0.25) 25%,transparent 0,transparent 75%,rgba(0,0,0,0.25) 0); background-size: 30px 30px; background-position: 0 0 ,15px 15px; } </style> </head> <body> <div class="cc"></div> </body> </html> 
【SVG】
这样的代码量不能算少，所以转到SVG方案可能是更好的选择
可能有人会说，CSS渐变可以节省HTTP请求。但实际上，可以把SVG文件以dataURL的方式内嵌到样式表中
[注意]SVG中的标签的属性值一定要添加引号，否则通过dataURL的方式引入的SVG文件无法显示成功
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .cc{ height: 100px; width: 100px; background: url('data:image/svg+xml,\ <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill-opacity=".25">\ <defs>\ <pattern id="pattern1" width="0.2" height="0.2" >\ <rect x="10" width="10" height="10"/>\ <rect y="10" width="10" height="10"/>\ </pattern>]\ </defs>\ <rect id="rect1" x="0" y="0" width="100" height="100" fill="url(#pattern1)"/>\ </svg>'); } </style> </head> <body> <div class="cc"> <svg xmlns="http//www.w3.org/2000/svg" width="100" height="100" fill-opacity=".25"> <defs> <pattern id="pattern1" width=0.2 height=0.2 > <rect x="10" width="10" height="10"/> <rect y="10" width="10" height="10"/> </pattern> </defs> <rect id="rect1" x="0" y="0" width="100" height="100" fill="url(#pattern1)" /> </svg> </div> </body> </html> 
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知