Page 64 - css揭秘

background: #58a;
background-image: repeating-linear-gradient(30deg,
hsla(0,0%,100%,.1),
hsla(0,0%,100%,.1) 15px,
transparent 0, transparent 30px);

结果看起来跟图 2-37 是一模一样的，但我们现在只需要修改一个地方
就可以改变所有颜色了。我们还得到了一个额外的好处，对于那些不支持
CSS 渐变的浏览器来说，这里的背景色还起到了回退的作用。不仅如此，在
下一篇攻略中我们还将看到，通过叠加的手法，具有透明区域的多个渐变图
案可以构造出非常复杂的图案。

试一试 play.csssecrets.io/subtle-stripes

„ CSS 图像 相关规范
http://w3.org/TR/css-images
„ CSS 背景与边框
http://w3.org/TR/css-backgrounds

„ CSS 图像（第四版）
http://w3.org/TR/css4-images

6 复杂的背景图案

背景知识

CSS 渐变，“条纹背景”

难题

在上篇攻略中，我们学会了如何用 CSS 渐变来创建各种条纹图案。但
是条纹并不是我们要实现的唯一背景图案，它甚至只是几何图案中最简单的

6 复杂的背景图案 33

඀ࠡ JOEC