CSS background 背景

• 在每一层中，下列的值可以出现 0 次或 1 次：
  
  
  
  
  
• 只能紧接着 出现，以"/"分割，如： center/80%.
• 可能出现 0 次、1 次或 2 次。(如果出现 1 次，它同时设定 background-origin 和 background-clip。如果出现 2 次，第一次的出现设置 background-origin，第二次的出现设置 background-clip。)
• 只能被包含在最后一层。只能设置一个背景颜色

指定多个背景层时，使用,分隔每个背景层。

background-attachment 图片的定位方式

属性值	作用
fixed	相对视口固定
local	若元素可滚动，背景将会随着元素的内容滚动 ， (背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框)
scroll	(默认值)背景会相对元素固定

可以用逗号分隔来为每一张背景图片指定不同的attachment属性值

background-image 背景图片资源地址

• none
• url(“xxx”)

background-position 背景图片定位

• center
• left
• right
• top
• bottom
• 通过注明距离某侧的距离 right xx bottom xxx

background-size 背景图片尺寸

• cover 沿长边进行缩放 保证图片对应边与当前边长度相同
• contain 沿短边进行缩放
• 百分比、像素 宽 高 默认值 auto auto

background-repeat 背景图片的重复

• no-repeat
• repeat-x / repeat-y
• space 第一个和最后一个图像会被固定在元素(element)的相应的边上, 同时空白会均匀地分布在图像之间. background-position属性会被忽视
• round 时而通过添加图片时而同过压缩扩张图像 来占据多出的空间
  可以设置双值: 水平方向 垂直方向

background-clip 背景显示范围范围

• border-box 默认值
• padding-box
• content-box
• text 可配合字体透明设置渐变色字体

background-origin 背景图片范围

• padding-box 默认值
• border-box
• content-box

当使用 background-attachment 为fixed时，该属性将被忽略不起作用

* {
  background: url('@/assets/dialogs/[email protected]') top 0 left 0 / 576px 38px no-repeat,
  url('@/assets/dialogs/[email protected]') right 0 top 36px / calc(100% - 316px) no-repeat,
  url('@/assets/dialogs/[email protected]') left 0 top 36px / 100% no-repeat;
}