SVG实现棋盘背景
棋盘图案在很多场景下都会用到。比如说，相对于单调的纯色背景来说，具有细微对比度的棋盘图案可能就是一个有趣的替代品。在各种应用程序的界面中，灰色的棋盘图案已经是用于表示透明色的事实标准。用css实现代码量不能算少，所以转到SVG方案可能是更好的选择 。
例子：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <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> </body> </html>
效果：
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知