Page 68 - css揭秘

@mixin polka($size, $dot, $base, $accent) { SCSS
background: $base;
background-image:
radial-gradient($accent $dot, transparent 0),
radial-gradient($accent $dot, transparent 0);
background-size: $size $size;
background-position: 0 0, $size/2 $size/2;
}

以后在创建波点图案时，我们就可以像这样调用它：
SCSS
@include polka(30px, 30%, #655, tan);

棋盘

棋盘图案在很多场景下都会用到。比如说，相对于单调的纯色背景来
说，具有细微对比度的棋盘图案可能就是一个有趣的替代品。在各种应用程
序的界面中，灰色的棋盘图案已经是用于表示透明色的事实标准。在 CSS 中
创建棋盘图案是可能的，只不过实现过程可能比我们想像中的要“绕”一些。
棋盘图案是可以通过平铺生成的，平铺成这个图案的典型贴片包含两种
不同颜色的方块，且相互间隔，就像图 2-44 中所标示出的那样。它貌似可
以在 CSS 中很容易地重现出来：只需要创建两个不同背景定位的方块就可
以了，没错吧？然而并非如此。是的，在技术上，我们可以用 CSS 渐变来
创建平铺的方块，但每个方块的周围是不会有空隙的，因此最终的结果看起
来就是一片实色。总的来说，只用一层 CSS 渐变无法创建四周有空隙的方
块。如果你对此还怀有疑议，不妨找找看有没有一种渐变可以在重复平铺时 图 2-44
产生如图 2-45 所示的图像。 一个灰色的棋盘图案通常用来表
示透明色；如果我们通过图片的
这里的窍门在于用两个直角三角形来拼合出我们想要的方块。我们已经 重复平铺来实现它，那么单个贴
知道了如何创建直角三角形。 （还记得我们在图 2-29 中尝试实现斜向条纹时 片应该就是虚线框所标示的范围
所遭遇的失败吗？）为了唤起你的记忆，我们再来看看当时的代码（这里换
用了另一种颜色和透明色）：

background: #eee;
background-image:
linear-gradient(45deg, #bbb 50%, transparent 0);
background-size: 30px 30px;
图 2-45
你可能还不明白这个方法是怎么发挥作用的。没错，如果我们尝试直接
四周有空隙的方块在平铺之后得到
用两个三角形组合出图 2-29 中那样的正方形，可能只会得到一片实色。但 的结果；单个贴片用虚线框标示
是，如果我们把这些三角形的直角边缩短到原来的一半，从而只占据贴片面
1
1
积的 ，而不是 ，会怎么样？要满足这一点，我们只需简单地把色标的位
8 2
置值从 50% 改为 25% 就可以了。然后我们得到的效果会如图 2-46 所示。
与此类似，如果我们把色标的顺序反转，就可以创建相反方向的三角形

6 复杂的背景图案 37

඀ࠡ JOEC