CSS实现花式背景图案.docxVIP

CSS3 实现花式背景图案　CSS3 gradient介绍一文中介绍了用渐变画实线条纹背景，事实上用渐变配合background背景图层可以创造出各种奇妙的背景效果，例如参照css3patterns。本篇就举几个例子介绍一下它们实现的原理。　网格桌布 Blueprint grid　先画格子线：.bluePrint { width: 180px; height: 120px; background-color:#269; background-image: linear-gradient(red 1px, transparent 0), linear-gradient(90deg, yellow 1px, transparent 0); background-size:20px 20px;}　background-image设置两个背景层，背景层里用linear-gradient画1px的实线(为了演示效果，先把横线设为红色，竖线设为黄色)。　如果眼神好会看到，元素顶边和底边是1px红色，左边和右边是1px的黄色，本着精益求精的精神，用background-position:-1px -1px;把它们去掉：　现在你可以再画一张不同线宽的背景图，无非就是上面代码的基础上改改线宽：background-image: linear-gradient(white 2px, transparent 0), linear-gradient(90deg, white 2px, transparent 0);background-size: 100px 100px;background-position:-2px -2px;　最后两张图合并起来就搞定了：//完整代码.bluePrint { width: 180px; height: 120px; background-color:#269; background-image: linear-gradient(white 2px, transparent 0), linear-gradient(90deg, white 2px, transparent 0), linear-gradient(rgba(255,255,255,.3) 1px, transparent 0), linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 0); background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px; background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;}　CSS代码很简短，而且维护很容易。不比加载img或svg差多少。　国际象棋 checkerboard　有了上面的经验，再试试国际象棋桌布。所谓棋盘无非就是两种颜色的方块错开的图案。看似容易，其实用一层CSS渐变是很难实现的。诀窍是用两个直角三角形拼出一个正方形。先画左下角的三角形：.checkerboard { width: 180px; height: 120px; background-color: #eee; background-image: linear-gradient(45deg, #bbb 25%, transparent 0); background-size: 30px 30px;}　再画右上角的三角形：(为展示效果，先将颜色设成红色)background-image: linear-gradient(45deg, transparent 75%, red 0);　两张背景叠起来：background-image: linear-gradient(45deg, #bbb 25%, transparent 0), linear-gradient(45deg, transparent 75%, red 0);　发现拼出来的效果不是正方形，原因是叠的位置不对。用background-position将第二层图片(红色三角)再往左下移动一半位置：background-position: 0 0, 15px 15px;　现在正方形出来了，怎么实现国际象棋那样错开呢?复制一个一样的图层，再如下蓝框所示，将新旧图层错开叠加：　复制出来的新图层，设置background-position往右下偏移一半距离，如蓝色框所示：background-image: linear-gradient(45deg, #bbb 25%, transparent 0), linear-gradient(45deg, transparent 75%, red 0