background 属性是CSS中用于设置元素背景的属性,最简单的background属性名,是针对背景若干设定的合并简写,最早的CSS只能使用单一背景图片,而在现在却可以设置多个背景图片。而不用图片的话,最早的background只能使用纯色填充,现在却可以使用各种渐变效果。现在所用的模型来自于CSS Backgrounds and Borders Module Level 3所定义的规范,主要分成了8个子属性。

背景颜色之 background-color

background-color 是最早,最古老,最…常用的属性之一,取值是唯一的,颜色值。

背景图片之 background-image

background-image顾名思义是设置背景“图片”的,这里的图片并非我们通常意义上理解的“图片”,而是由CSS Image Values and Replaced Content Module所规定的一系列内容,用以替代CSS2中所规定的background-image属性与list-style-image属性中的url参数,或者作为伪元素content的值。现在浏览器也没有完全实现这些,可用的包括url()引用图片,和渐变“图片”,然后以逗号分隔所有图片(如果有)。

CSS 渐变

CSS渐变分成两种,linear-gradient()的线性渐变和radial-gradient()的径向渐变。两个渐变在早期不同浏览器上的实现语法大相径庭,所以用的人较少,还是倾向于使用图片,现在各个浏览器的显示和实现已经基本趋向于一致,而且在手机端也有比较好的实现,在移动端开发完全可以广泛使用了(但是在兼容IE9-的时候还是╮(╯_╰)╭),下面是详细介绍,也可以用生成器来搞定啦。

线性渐变:linear-gradient(<angle>, <start>[, <stop>]+);

径向渐变

radial-gradient([ [ <shape> || <size> ] [ at <position> ]? , | at <position>, ]? <color-stop> [ , <color-stop> ]+)

我本想把这个语法简写一下的…减来简去发现还是这么写就好了(毕竟人家规范就是这么写的,果然深思熟虑过)…从后往前说

<color-stop> 和线性渐变一样,<color>[ <position>]?,也可以设定多个颜色值,而不写位置的话,就按照规定的值平均分布。
颜色前面一大串:定义径向渐变的圆心、位置和渐变模式。<shape> 是形状,可选值为ellipses(椭圆)或者circles(正圆),如果整个元素是个正方形的话,两个形状就都一样啦。

<size> 是尺寸,可以定义渐变的数值半径,如果形状是椭圆的话,需要填写两个尺寸值,按顺序是水平半径和垂直半径,此时尺寸可以写百分数。

尺寸另外还有4个关键字可用:closest-side(最近的边)、farthest-side(最远的边)、closest-corner(最近的角)、farthest-corner(最远的角),这4个关键字是指圆心相对于元素而言的,顾名思义想一下就好。

<position> 是圆心位置,需要在位置前面加上at,可以用position常用的关键字,也可以使用数值定义。

比如如下三行代码,就是等价的:

radial-gradient(yellow, green);
radial-gradient(ellipse at center, yellow 0%, green 100%);
radial-gradient(farthest-corner at 50% 50%, yellow, green);

重复渐变:repeating-linear-gradient()和repeating-radial-gradient()

用法同上,只是这回是重复渐变了而已。这里有一些很漂亮的Demo,当然它主要是为展示background-blend-mode属性建立的。

背景重复之 background-repeat

background-repead用于设置背景的重复方式,可选值有下面几种:

背景固定之 background-attachment

background-attachment用于设置背景相对的固定方式,可选值有:

背景定位之 background-position

background-positon,顾名思义就是用来定位的…但是这个定位吧…语法很复杂(或者说很随意)。可用的各种指示方向的关键字,也可以用数字单位或者百分比,写法有下面几种:

背景裁切之 background-clip

background-clip是设定背景所覆盖的范围的属性。可选值有:

背景原点之 background-origin

background-origin指定了背景图片定位的原点。属性取值与background-clip相同,但是clip是会对背景图片进行裁切,而origin是用于定位的。

可以看这个Demo,展现得比较清晰了。

背景尺寸之 background-size

background-size用来设置背景尺寸,可选值有:

变形金刚之 background

background是上面8个属性的总和…可以把所有属性写在一起。顺序不限,以空格隔开即可,但有几个需要注意的点:

合体战士之多重背景

从CSS3时代开始,CSS背景开始支持多个背景图,设置在一起了。

只要将每张背景图以逗号分开,那么浏览器就会依次加载,并把写在后面的叠在上面。

对于分开设置的背景属性,也可以以逗号分隔,分别设置。但是如果,你只想设置其中某一张图片的特定属性,那你就得把其他的也都写上才行…

以及,背景颜色是唯一的(摊手),在使用background简写的时候,背景颜色要设置在最后一个逗号之后。

还有什么?

还有,在去年最新的Compositing and Blending草案中,提出了混合模式的规范草案,涉及到背景的属性是background-blend-mode,于本文成文时,只有Chrome和FF两大浏览器支持这一属性。

如果各位有玩过Photoshop的话,应该会对Photoshop中的混合模式有所耳闻,二者意思差不多。background-blend-mode的可选参数包括:normal(普通),multiply(正片叠底),screen(滤色),overlay(叠加),darken(变暗),lighten(变亮),color-dodge(颜色减淡),color-burn(颜色加深),hard-light(强光),soft-light(柔光),difference(差值),exclusion(排除),hue(色相),saturation(饱和度),color(颜色),luminosity(明度)。

这些参数的中文都是我根据Photoshop的混合模式直接翻译过来的(繁体用户可以参考这里),规范草案中也给出了每种混合模式的算法和演示效果,因为时间问题我就不一一验证效果了,如果有出入均以实际效果为准。MDN上有实际演示的Demo,我前面提到的那个网站也有很多实际的展示。

当然这些混合模式也可以应用在其他图像(比如SVG)上,我觉得这完全是为了让那些设计师和前端工程师之间少一些争吵多一些真诚(摊手)。

参考资料

  1. MDN相关页面:除了上面说的,还有能否应用于 CSS 动画,以及兼容性的相关资料。
  2. W3C规范:原始规范文档

[ via ]

# # # #

分享此文: 微信 新浪微博 QQ
上一篇

前端工具 Sublime Text 3 主题推荐:Material Theme

下一篇

《触动人心》

发表评论