css 背景background

原文链接: css 背景background

上一篇: MongoDB——$elemMatch(数组的内嵌文档查询匹配)

下一篇: localhost与127.0.0.1 的区别

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

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

1）、<shape> 是形状，可选值为 ellipses （椭圆）或者 circles （正圆），如果整个元素是个正方形的话，两个形状就都一样啦。

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

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

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

• <color-stop> 和线性渐变一样， <color>[ <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 之类简写的方式相似。