01 background-repeat

**background-repeat** CSS 属性定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。
默认情况下，重复的图像被剪裁为元素的大小，但它们可以缩放 (使用 round) 或者均匀地分布 (使用 space).

一.语法

  1. /* 单值语法 */
  2. background-repeat: repeat-x;   // x轴重复
  3. background-repeat: repeat-y;   // Y轴重复
  4. background-repeat: repeat;     // 双轴重复
  5. background-repeat: space;      // 空格
  6. background-repeat: round;      // 拉伸
  7. background-repeat: no-repeat;  // 不重复
  9. /* 双值语法: 水平horizontal | 垂直vertical */
  10. background-repeat: repeat space;
  11. background-repeat: repeat repeat;
  12. background-repeat: round space;
  13. background-repeat: no-repeat round;
  15. background-repeat: inherit;   // 继承

repeat 图像会按需重复来覆盖整个背景图片所在的区域. 最后一个图像会被裁剪, 如果它的大小不合适的话.

space 图像会尽可能得重复, 但是不会裁剪. 第一个和最后一个图像会被固定在元素(element)的相应的边上, 同时空白会均匀地分布在图像之间. [background-position](https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-position)属性会被忽视, 除非只有一个图像能被无裁剪地显示. 只在一种情况下裁剪会发生, 那就是图像太大了以至于没有足够的空间来完整显示一个图像.

round 图像会尽可能得重复, 但是可以裁剪，随着允许的空间在尺寸上的增长, 被重复的图像将会伸展(没有空隙), 直到有足够的空间来添加一个图像. 当下一个图像被添加后, 所有的当前的图像会被压缩来腾出空间. 例如, 一个图像原始大小是260px, 重复三次之后, 可能会被伸展到300px, 直到另一个图像被加进来. 这样他们就可能被压缩到225px.

02 background-position

**background-position** 为每一个背景图片设置初始位置。 这个位置是相对于由 [background-origin](https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-origin) 定义的位置图层的。

一.语法

  1. /* Keyword values */
  2. background-position: top;
  3. background-position: bottom;
  4. background-position: left;
  5. background-position: right;
  6. background-position: center;
  8. /* <percentage> values */
  9. background-position: 25% 75%;
  11. /* <length> values */
  12. background-position: 0 0;
  13. background-position: 1cm 2cm;
  14. background-position: 10ch 8em;
  16. /* Multiple images */
  17. background-position: 0 0, center;
  19. /* Edge offsets values */
  20. background-position: bottom 10px right 20px;
  21. background-position: right 3em bottom 10px;
  22. background-position: bottom 10px right;
  23. background-position: top right 10px;
  25. /* Global values */
  26. background-position: inherit;
  27. background-position: initial;
  28. background-position: unset;

一个 [<position>](https://developer.mozilla.org/zh-CN/docs/Web/CSS/position_value) 定义一组 x/y 坐标（相对于一个元素盒子模型的边缘），来放置这个项目（原文为 item）。它可以被定义为一个值或者两个值。如果被定义为两个值，那么第一个值代表水平位置，第二个代表垂直垂直位置。如果只指定一个值，那么第二个值默认为 center。

一个值的语法: 这个值可以是：
两个值的语法: 一个定义 x 坐标，另一个定义 y 坐标。每个值可以是：

  • 关键字 top, left, bottom, right 中的一个。 如果这里给出 left 或 right，那么这个值定义 x 轴位置，另一个值定义 y 轴位置。如果这里给出 top 或 bottom，那么这个值定义 y 轴位置，另一个值定义 x 轴位置。
  • [<length>](https://developer.mozilla.org/zh-CN/docs/Web/CSS/length) 或 [<percentage>](https://developer.mozilla.org/zh-CN/docs/Web/CSS/percentage)。如果另一个值是 left 或 right，那么这个值（指 [<length>](https://developer.mozilla.org/zh-CN/docs/Web/CSS/length) 或 [<percentage>](https://developer.mozilla.org/zh-CN/docs/Web/CSS/percentage)）定义相对于上边缘的 y 轴位置。 如果两个值都是 <length> 或 <percentage>，那么第一个值定义 x 轴位置，第二个定义 y 轴位置。

注意：
也就是说，top top 和 left left是无效的。

百分比：
百分比值的偏移指定图片的相对位置和容器的相对位置重合。值0%代表图片的左边界（或上边界）和容器的左边界（上边界）重合。值100%代表图片的右边界（或下边界）和容器的右边界（或下边界）重合。值50%则代表图片的中点和容器的中点重合。

当指定百分比值的时候，实际上执行了以下的计算公式（该公式可以用数学方式定义图片和容器相对位置重合）：

(container width - image width) * (position x%) = (x offset value)<br />(container height - image height) * (position y%) = (y offset value)

使用X坐标来举个例子，假设有一个300px宽的图片，将这个图片使用到一个100px宽的容器中，并且将background-size设置成自动：

100px - 300px = -200px (容器和图片的宽度差)

当对background-position设置值依次为-25%，0%，50%，100%，125%，得到图片相对容器的偏移值为：

-200px * -25% = 50px<br />-200px * 0% = 0px<br />-200px * 50% = -100px<br />-200px * 100% = -200px<br />-200px * 125% = -250px

对于这些例子中设置的偏移，图片相对容器真实的偏移值就是

03 background-origin

background-origin 规定了指定背景图片[background-image](https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-image) 属性的原点位置的背景相对区域.
注意：当使用 background-attachment 为fixed时，该属性将被忽略不起作用。

一.语法

  1. background-origin: border-box  // 背景图片的摆放以border区域为参考 默认
  2. background-origin: padding-box // 背景图片的摆放以padding区域为参考
  3. background-origin: content-box // 背景图片的摆放以content区域为参考
  5. background-origin: inherit
  1. div {
  2.   background-image: url('logo.jpg'), url('mainback.png');
  3.   background-position: top right, 0px 0px;
  4.   background-origin: content-box, padding-box;
  5. }

04 background-attachment

**background-attachment** CSS 属性决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。

一.语法

  1. /* 关键 属性值 */
  2. background-attachment: scroll;
  3. // 此关键属性值表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动，
  4. 并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。
  6. background-attachment: fixed;
  7. //此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。
  9. background-attachment: local;
  10. // 此关键属性值表示背景相对于元素本身固定， 而不是随着它的内容滚动（对元素边框是有效的）。
  12. /* 全局 属性值 */
  13. background-attachment: inherit;
  14. background-attachment: initial;
  15. background-attachment: unset;

05 background-size

background-size 设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。

一.语法

  1. /* 关键字 */
  2. background-size: cover
  3. background-size: contain
  5. /* 一个值: 这个值指定图片的宽度，图片的高度隐式的为auto */
  6. background-size: 50%
  7. background-size: 3em
  8. background-size: 12px
  9. background-size: auto
  11. /* 两个值 */
  12. /* 第一个值指定图片的宽度，第二个值指定图片的高度 */
  13. background-size: 50% auto
  14. background-size: 3em 25%
  15. background-size: auto 6px
  16. background-size: auto auto
  18. /* 逗号分隔的多个值：设置多重背景 */
  19. background-size: auto, auto     /* 不同于background-size: auto auto */
  20. background-size: 50%, 25%, 25%
  21. background-size: 6px, auto, contain
  23. /* 全局属性 */
  24. background-size: inherit;
  25. background-size: initial;
  26. background-size: unset;

06 background-image

CSS **background-image** 属性用于为一个元素设置一个或者多个背景图像。

在绘制时，图像以 z 方向堆叠的方式进行。先指定的图像会在之后指定的图像上面绘制。因此指定的第一个图像“最接近用户”。

然后元素的边框 border 会在它们之上被绘制，而 [background-color](https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-color) 会在它们之下绘制。图像的绘制与盒子以及盒子的边框的关系，需要在CSS属性[background-clip](https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-clip) 和 [background-origin](https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-origin) 中定义。

如果一个指定的图像无法被绘制 (比如，被指定的 URI 所表示的文件无法被加载)，浏览器会将此情况等同于其值被设为 none。

一.语法

  1. background-image:
  2.   linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)),
  3.   url('https://mdn.mozillademos.org/files/7693/catfront.png');
  1. where 
  2. <bg-image> = none | <image>
  4. where 
  5. <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>
  7. where 
  8. <image()> = image( <image-tags>? [ <image-src>? , <color>? ]! )
  9. <image-set()> = image-set( <image-set-option># )
  10. <element()> = element( <id-selector> )
  11. <paint()> = paint( <ident> (en-US), <declaration-value>? )
  12. <cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
  13. <gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>
  15. where 
  16. <image-tags> = ltr | rtl
  17. <image-src> = <url> | <string>
  18. <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
  19. <image-set-option> = [ <image> | <string> ] <resolution>
  20. <id-selector> = <hash-token>
  21. <cf-mixing-image> = <percentage>? && <image>
  22. <cf-final-image> = <image> | <color>
  23. <linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
  24. <repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
  25. <radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
  26. <repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
  27. <conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )
  29. where 
  30. <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
  31. <rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
  32. <hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
  33. <hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
  34. <side-or-corner> = [ left | right ] || [ top | bottom ]
  35. <color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop>
  36. <ending-shape> = circle | ellipse
  37. <size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}
  38. <position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
  39. <angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>
  41. where 
  42. <alpha-value> = <number> | <percentage>
  43. <hue> = <number> | <angle>
  44. <linear-color-stop> = <color> <color-stop-length>?
  45. <linear-color-hint> = <length-percentage>
  46. <length-percentage> = <length> | <percentage>
  47. <angular-color-stop> = <color> && <color-stop-angle>?
  48. <angular-color-hint> = <angle-percentage>
  50. where 
  51. <color-stop-length> = <length-percentage>{1,2}
  52. <color-stop-angle> = <angle-percentage>{1,2}
  53. <angle-percentage> = <angle> | <percentage>

07 background-clip

background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。

如果没有设置背景图片（[background-image](https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-image)）或背景颜色（[background-color](https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-color)），那么这个属性只有在边框（ [border](https://developer.mozilla.org/zh-CN/docs/Web/CSS/border)）被设置为非固实（soild）、透明或半透明时才能看到视觉效果（与 [border-style](https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-style) 或 [border-image](https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-image) 有关），否则，本属性产生的样式变化会被边框覆盖。

一.语法

  1. /* Keyword values */
  2. background-clip: border-box; // 背景延伸至边框外沿（但是在边框下层）
  3. background-clip: padding-box; // 背景延伸至内边距（padding）外沿。不会绘制到边框处
  4. background-clip: content-box; // 背景被裁剪至内容区（content box）外沿。
  5. background-clip: text;  // 背景被裁剪成文字的前景色。
  7. /* Global values */
  8. background-clip: inherit;
  9. background-clip: initial;
  10. background-clip: unset;