CSS中的背景用法大全

css 背景 background| 2016-06-06

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>]+);

<angle> 可以选择 to top、to bottom、to left、to right这4个关键字和 *deg 设置， 0deg（↓）就相当于 to bottom， 90deg（←）相当于 to left，以此类推。
<start>，<stop> 的值则为<color>[ <position>]?，第一个和最后一个颜色不用写<position>，中间的颜色如果不写的话，所有的颜色就会平均分布。

径向渐变：
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用于设置背景的重复方式，可选值有下面几种：

no-repeat 不重复，等价于no-repeat no-repeat
repeat-X X轴方向（横向）重复，等价于repeat no-repeat
repeat-Y Y轴方向（纵向）重复，等价于no-repeat repeat
repeat 重复平铺，等价于repeat repeat
除了这4个常用的，还有两个…大概没什么人用，兼容性也不是很好的取值：
round 图像在指定方向平铺，会根据显示空间的大小缩放图像（什么时候缩放，什么时候增减平铺的数量是由浏览器决定的）
space 图像会尽可能重复，但不裁剪，第一张和最后一张固定在元素两端，剩下的均匀分布。此时background-position属性被忽视。另外只有在图像大过元素的时候会发生裁剪。

背景固定之 background-attachment

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

scroll 默认值，背景相对于元素固定。
fixed 背景相对于整个窗口固定。随着最近全屏大图网站的流行，这种背景固定模式也日渐多见起来。
local 背景相对于元素内容固定，如果元素内有滚动条，背景会随着内容滚动。
local这种模式我们几乎不怎么用到，这里找到一篇文章，作者写了一个Demo，在元素出现滚动条的时候，会在它的可滚动方向出现阴影。虽然是属于交互设计范畴，但随着各个网站更加强调重视用户体验，这种需求是早晚的事，而作者的Demo是非常有趣（且有效率）的实现方式。

背景定位之 background-position

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

并列写两个关键字（或值），第一个值代表它的水平位置，第二个值代表它的垂直位置（这个和padding、margin、border这些先上下再左右的属性刚好是反的…）。另外如果两个都是关键字，那么位置可以交换，也就是说，center left是合法的，然而50% left不行。
只写一个关键字（或值），那么它的第二个值就默认为center（居中）。
三、四值，可以从元素的四周定位，比如离右边10px，底边5px，就可以写成right 10px bottom 5px，两组关键字-值对可以交换位置，也可以用center替代关键字-值。这种写法目前（2016-06）只有FF支持。

背景裁切之 background-clip

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

border-box 默认值，背景延伸到边框下，但是只有当边框的颜色是半透明的时候才能看到延伸过来的背景。
padding-box 边框下没有背景。
content-box 只有内容下有背景（padding的空间里都没有）

背景原点之 background-origin

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

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

背景尺寸之 background-size

background-size用来设置背景尺寸，可选值有：

一对值\百分比或auto，百分比是相对于background-origin所设置的尺寸而言的，auto就是图片原本的尺寸，两个数值先宽后高。
cover 缩放图片，令其完全覆盖背景区域，可能导致图片某些区域不可见。
contain 缩放图片，令其以最大尺寸完整展现在背景区域中，可能导致背景某些区域变成空白。

变形金刚之 background

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

如果需要设定背景尺寸，写法是<position>/<size>，必须设定 <position> 的同时，以 / 分隔 <position> 和 <size>。
background-clip和background-origin的属性，如果只写了一个值，那么会同时应用在两个属性上，如果写了两个值，那么前者是background-origin，而后者是background-clip
没有设置的会被设为默认值，之后也可以单独设置，这个和padding之类简写的方式相似。

合体战士之多重背景

从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）上，我觉得这完全是为了让那些设计师和前端工程师之间少一些争吵多一些真诚（摊手）。

本文文字及图片出自 hikarievo.me