CSS3之背景 backgroundbackground是一个简写属性，可以在一次声明中定义一个或多个属性。除去特定的属

background　　

　　background是一个简写属性，可以在一次声明中定义一个或多个属性。除去特定的属性其他属性可以按任意位置放置。

background语法：

CSS3 background支持多重背景，主要是靠origin、clip和size组成新的background多次叠加

注意

background 属性被指定多个背景层时，使用逗号分隔每个背景层。每个属性用空格隔开
如果有size的值必须紧跟着position，用 / 隔开
background-color只能设置一个值且被包含在最后一层
border-box/padding-box/content-box 如果出现一次则同时设置origin和clip，如果出现两次第一个指定origin，第二个指定clip
多重背景，其他属性只有一个表示所有的背景共用一个属性的属性值

background-color

　　background-color会设置元素的背景色，属性的值为颜色值或者关键字“transparent”二者选其一。background-color的优先级比background-image低，如果同时存在backgound-color和background-image时，image会显示在color上面


/* Keyword values */
background-color: red;

/* Hexadecimal value */
background-color: #bbff00;

/* RGB value */
background-color: rgb(255, 255, 128);

/* HSLA value */
background-color: hsla(50, 33%, 25%, 0.75);

/* Special keyword values */
background-color: currentColor;
background-color: transparent;

/* Global values */
background-color: inherit;
background-color: initial;
background-color: unset;

background-image

　　background-image属性用于为一个元素设置一个或者多个背景图像，多个背景图用','隔开。
background-image: url('xx') || linear-gradient(渐变) || none(无背景图)

/* html */
<div class="border-image-color"></div>
/* css */
.border-image-color {
  width: 500px;
  height: 400px;
  border: 20px dashed yellowgreen;
  background-image: url(https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/19/170f20b3c106f518~tplv-t2oaga2asx-image.image);
  background-repeat: no-repeat;
  background-origin: border-box;
  background-color: lightSkyBlue;
  background-position: -60px -20px;
}

注意

background-image的绘制方向在Z轴上堆叠方式，先指定的图像会在后指定图像上面
background-image绘制在border之下，background-color之上
background-image的绘制、显示位置与background-position、background-clip、background-origin相关

background-origin

　　background-origin规定了背景图片background-image属性的原点位置的背景相对区域，为background-position设置初始位置。但是当background-attachment为fixed时，此属性将被忽略，不起作用。

属性值：默认值/padding-box

border-box 背景图片的摆放以border区域为参考
padding-box 背景图片的摆放以padding区域为参考
content-box 背景图片的摆放以content区域为参考

background-position

　　background-position为每个背景图片设置初始位置，background-position的原点是background-origin定义的位置，相对偏移量都是以原点为基准。

属性值：默认值/left top

三种取值类型可以混合使用

关键字
- center用来居中背景图片
- left、right指定图片放置于X轴的左右边缘
- top、bottom指定图片放置于Y轴的上下边缘
length 数值+ 'px'，指定相对于X,Y坐标的位置
percentage 百比分，指定相对于X,Y坐标的位置

值个数

关键字取单个值，另外一个位置默认为 center
length、percentage取一个值　当前值同时指定X轴与Y轴的坐标
length、percentage取两个值，第一个值定义X轴的方向、第二值定义Y轴的方向
四个值 position: bottom 10px right 20px; 关键字定义位置，length/percentage定义距离

扩展

background-position属性已经得到扩展，它允许我们指定背景图片距离任意角的偏移量，只要我们在偏移量(length/percentage)前面指定关键字(top,bottom,left,right)

percentage语法

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

percentage公式：
(container width - image width) * (position x%) = (x offset value)
(container height - image height) * (position y%) = (y offset value) 　　

/* html */
<div class="border-image-color"></div>
/* css */
/*
    图片宽度： 642px
    容器宽度: 742px
    容器宽度：，容器box-sizing与背景background-origin同步作用
    若想X方向上移动20px：20px / (742px - 642px) = 20%
    X方向上移动20%，实际移动像素值： (742px - 642px) * 20% = 20px
    
    其中若background-origin为padding-box
    实际容器宽度应为包裹图片时原点origin控制的部分
    容器宽度则需要减去边框40px，实际为702px，再在X轴移动20%时实际移动的像素：
    (702px - 642px) * 20% = 12px
*/
.border-image-color {
  box-sizing: border-box;
  width: 742px;
  height: 400px;
  border: 20px dashed yellowgreen;
  background-image: url(https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/19/170f20b3c106f518~tplv-t2oaga2asx-image.image);
  background-repeat: no-repeat;
  background-origin: border-box;
  background-color: lightSkyBlue;
  background-position: 20% 0px;
}

background-size

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

属性值：默认值/auto auto

关键字
- auto 以背景图片的比例缩放背景图片。
- cover 缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。和 contain 值相反，cover值尽可能大的缩放背景图像并保持图像的宽高比例(图像不会被压扁)
- contain (背景区容纳背景图片)缩放背景图片以完全装入背景区，可能背景区部分空白。contain尽可能的缩放背景并保持图像的宽高比例(图像不会被压缩)

length 指定背景图的宽高，不能为负值
percentage 指定背景图片相对背景区(同position的容器宽高)的百分比。背景区由background-origin设置

background-repeat

　　background-repeat属性定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。

属性	定义
repeat	图像会按需重复来覆盖整个背景图片所在的区域. 最后一个图像会被裁剪, 如果它的大小不合适的话. repeat-x、repeat-y指定单方向重复
space	图像会尽可能得重复, 但是不会裁剪. 第一个和最后一个图像会被固定在元素(element)的相应的边上, 同时空白会均匀地分布在图像之间. background-position属性会被忽视, 除非只有一个图像能被无裁剪地显示. 只在一种情况下裁剪会发生, 那就是图像太大了以至于没有足够的空间来完整显示一个图像.
round	随着允许的空间在尺寸上的增长, 被重复的图像将会伸展(没有空隙), 直到有足够的空间来添加一个图像. 当下一个图像被添加后, 所有的当前的图像会被压缩来腾出空间. 例如, 一个图像原始大小是260px, 重复三次之后, 可能会被伸展到300px, 直到另一个图像被加进来. 这样他们就可能被压缩到225px.
no-repeat	图像不会被重复(因为背景图像所在的区域将可能没有完全被覆盖). 那个没有被重复的背景图像的位置是由background-position属性来决定.

space round

background-attachment

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

属性值

fixed 表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动
local 表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动，并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。
scroll 示背景相对于元素本身固定，而不是随着它的内容滚动（对元素边框是有效的）。

background-clip

　　background-clip设置元素的背景（背景图片或颜色）是否延伸到边框下面

取值：默认值/border-box

border-box 背景延伸至边框外沿（但是在边框下层）
padding-box 背景延伸至内边距（padding）外沿。不会绘制到边框处
content-box 背景被裁剪至内容区（content box）外沿
text 背景被裁剪成文字的前景色,属性值为text时属性应设置为 -webkit-background-clip, 字体的颜色使用背景色即color: transparent/-webkit-text-fill-color: transparent;

/* html */
<div class="border-image-color">
  text
</div>
/* css */
.border-image-color {
  box-sizing: border-box;
  width: 642px;
  height: 400px;
  font-size: 100px;
  line-height: 300px;
  text-align: center;
  border: 20px dashed yellowgreen;
  background-image: url(https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/19/170f20b3c106f518~tplv-t2oaga2asx-image.image);
  background-repeat: no-repeat;
  background-origin: border-box;
  -webkit-background-clip: text;
  color: transparent;
}

clip:text

多重背景使用实例

工作场景：官网主页底部为铺满不同的图片，图片之上再进行基本的图片文字排版

使用多重背景处理可以避免冗余空的html元素格外铺图片，避免伪元素和伪类去进行多余的position定位（若背景图片超过2个时，使用伪类和伪元素也比较困难）

多图片为底

/* html */
<div class="border-image-color">
  <div class="section">
    我是排版一
  </div>
  <div class="section">
    我是排版二
  </div>
</div>

/* css */
.border-image-color {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 600px;
  height: 580px;
  border: 1px solid yellowgreen;
  text-align: center;
  background: url(https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/20/170f5f4c42de2970~tplv-t2oaga2asx-image.image) 0px 0px,
              url(https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/19/170f20b3c106f518~tplv-t2oaga2asx-image.image) 0px 250px;
  background-size: contain 250px;
  background-repeat: no-repeat;
}
.section {
  width: 400px;
  height: 200px;
  line-height: 200px;
  margin: 30px auto;
  text-align: center;
  background-color: rgba(0,0,0, .8);
  color: #fff;
}

CSS3之背景 background

background

注意

background-color

background-image

注意

background-origin

属性值： 默认值/padding-box

background-position

属性值：默认值/left top

值个数

扩展

percentage语法

background-size

属性值：默认值/auto auto

background-repeat

background-attachment

属性值

background-clip

取值：默认值/border-box

多重背景使用实例

background　　

属性值：默认值/padding-box