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

Eighteen Z

已于 2023-08-03 17:56:41 修改

阅读量302

点赞数

分类专栏： css样式文章标签： css揭秘 svg 棋盘背景

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

本文为博主原创文章，未经博主允许不得转载！转载请注明出处。[进入个人博客 Eighteen Blog](https://www.zsfmyz.top)

本文链接：https://blog.csdn.net/lunhui1994_/article/details/114139497

版权

css样式专栏收录该内容

40 篇文章 2 订阅

订阅专栏

文章目录

前言
一、网格Svg
- - - svg
    - css
小结
相关阅读

前言

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

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