博客

CSS揭秘：6.复杂的背景图案（下）

  • Post author:
  • Post category:其他


文章目录



前言

上一篇文章中我们学会了如何使用实现棋盘背景的方法，但是显而易见的代码量是比较多的。那么怎么可以优化代码量，降低维护成本呢？




一、网格Svg


我们可以看到下面的代码，其实内容是比较多的。如果要修改格子的尺寸或者颜色，要同时修改好几个地方。当然我们可以通过scss或者less等工具提取变量简化代码，但是代码量依然很多。
 


	width:200px;
	height:200px;
	background: #eee;
	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-position: 0 0, -20px 20px,                     
		20px -20px, 0 0;
	background-size: 40px 40px;


实际效果。

在这里插入图片描述

这样的情况下我们其实可以将其转化为svg背景。



svg

 
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill-opacity=".25" >
<rect x="50" width="50" height="50" />
<rect y="50" width="50" height="50" /> </svg>



css

background: #bbb url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" \
                 width="100" height="100" \
                 fill-opacity=".25">\
            <rect x="50" width="50" height="50" /> \
            <rect y="50" width="50" height="50" /> \
            </svg>');
background-size: 30px 30px;

css可以通过反斜杠 \ 来进行折行，达到优化可读性的目的。

在这里插入图片描述



小结

本篇较为简短，主要是新增了一种使用svg实现格子背景的方法。



相关阅读


版权声明：本文为lunhui1994_原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。