[CSS] 以 CSS 自制对象背景

CSS3 所提供的许多新功能真的可以帮我们节省许多时间与精力。对于我这种没有美工基础的程序员来说, 如果想帮 HTML 组件做个可以看的背景图, 虽然不是办不到, 但是如果自己画, 可能花了许多工夫, 还是觉得难看; 如果上网络去找, 除了随时有侵权的疑虑, 同样要花掉许多时间。后来转念一起, 为何不使用 CSS 本来就提供的功能? 东西是自己做的, 高兴怎么用就怎么用, 改起来也容易...


CSS3 所提供的许多新功能真的可以帮我们节省许多时间与精力。对于我这种没有美工基础的程序员来说, 如果想帮 HTML 组件做个可以看的背景图, 虽然不是办不到, 但是如果自己画, 可能花了许多工夫, 还是觉得难看; 如果上网络去找, 除了随时有侵权的疑虑, 同样要花掉许多时间。后来转念一起, 为何不使用 CSS 本来就提供的功能? 东西是自己做的, 高兴怎么用就怎么用, 改起来也容易。

首先, 先来看看成果, 再来做技术性的说明:

上述的条纹都是使用 CSS 产生的。虽然这几张图看起来都不同, 但它们使用的语法都是同一个, 亦即 linear-gradient 这个 CSS 属性。如果你想深入研究 Gradient 这个属性, 可以在上面 W3School 的连结中看到, 我就不深入说明了。在这里, 我只介绍我以下会用到的 linear-gradient 属性和其用法。

和一般人对 linear-gradient 的用法的认知可能略有不同, 我是把 linear-gradient 写在 background-image 之下。换句话说, 我是让 CSS 做出来的渐层色当做背景图片来使用的。在此同时, 我还套用了 background-size 以及 background-color; 所以 linear-gradient 这个属性在本例中并不是单独存在的:

.stripes0 {
    background-size: 25px 25px;
    background-color: rgba(31, 2, 30, .3);
    background-image: 
        linear-gradient(
            0deg, 
            transparent 50%, 
            rgba(200, 0, 0, .2) 50%);
}

设定 background-size: 25px 25px; 的目的, 当然就是因为我们下面使用了 background-image 的关系。所以在这里我把这个背景图 (不是真的图) 的大小设定为 25 X 25 pixel。

接着, 我又设定了 background-color 属性。如果你使用在 background-image 中使用了真的图片, 那么设定 background-color 属性就没什么意义了; 但是因为我们使用的是 CSS 描出来的图, 我又用了许多透明色, 所以设定背景色是有意义的。

接着, 我们来看 linear-gradient 的语法。我在上列程序中已经做了排版, 所以你可以看得很清楚。它的第一个参数是角度; 如此, 我们可轻易以做出直的 (90deg)、横的(0deg) 与斜的 (45deg) 这几种条纹。

从第二个参数之后, 就是颜色与相对位置了。例如 "transparent 50%" 指的是在 50% 的地方使用透明色的意思。你不一定要使用百分比, 你也可以使用 px 之类的单位。此外, 如果你前面指定 0deg, 那么它是从下面起算的。这是一个通常让人误会的地方。

在上面的范例中, 你可能已经看到我既指定了 "transparent 50%", 后面又跟了一个 "rgba(200, 0, 0, .2) 50%"。为什么在同一个地方指定了两种颜色呢? 因为该语法的基本逻辑是“从... 到...”的意思, 用白话来讲, 浏览器遇到这种语法时, 它会“从第 0% 处 (在这里是单位背景图的最下方) 到第 50% 处什么都不画, 然后从第 50% 处到第 100% 处 (最上方) 填入 rgba(200, 0, 0, .2) 这个颜色”。

因此, 上面那段程序的语法也可以写成如下:

.stripes0 {
    background-size: 25px 25px;
    background-color: rgba(31, 2, 30, .3);
    background-image: 
        linear-gradient(
            0deg, 
            transparent 0%, 
            transparent 50%, 
            rgba(200, 0, 0, .2) 50%,
            rgba(200, 0, 0, .2) 100%);
}

虽然第二种写法比较正式, 也比较直觉, 但是像最上面的那种省略式的写法很普遍, 你不能不知道。

我把我写的几个背景图放上 jsFiddle, 有兴趣的朋友可以亲自操作试试:

值得一提的是, 当制作斜条纹的时候, 由于精确度的问题, 斜线其实画得并不直; 这并不是浏览器的问题, 我在 Chrome 和 IE 都发现相同的问题。所以我把单位背景图调整成 26 X 26 pixel, 看起来就比较自然。把颜色的透明度降低也略有帮助。

此外, 我在最后一个背景图 (模糊条纹) 中让颜色的区间放大了, 如此渐层就看得出来。图片的模糊感就是这样做出来的。

如果你觉得我做的这几个背景图不够好, 你可以自己把各种值拿去修改, 也许可以创作出更棒的效果!但是如果你想直接看看别人现成的作品, 我找到这个另人惊艳的 CSS3 Patterns Gallery, 各位不妨参考参考。

以下是几个套用以上各模式的实际范例。


Dev 2Share @ 点部落