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

原创已于 2025-07-10 09:46:39 修改 · 437 阅读

0 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载！转载请注明出处。

文章标签：

#css揭秘 #svg #棋盘背景

于 2021-02-26 16:47:21 首次发布

css样式专栏收录该内容

42 篇文章

订阅专栏

上一篇介绍了实现棋盘背景的方法，但代码量多。本文新增一种使用svg实现格子背景的方法，可优化代码量、降低维护成本。还提到可通过scss或less提取变量简化代码，css能用反斜杠折行优化可读性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

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

一、网格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可以通过反斜杠 \ 来进行折行，达到优化可读性的目的。
在这里插入图片描述