background-attachment, background-size, background-repeat

[nfssuzukaze]

background-attachment（设置 background-image 的固定方式）

属性值

• local（相对于元素的内容固定，可以随着元素的内容滚动而滚动）
  • 如果元素有滚动条，那么滑动滚动条，背景也会跟着滑动
• scroll（相对于元素本身固定）
  • 如果元素有滚动条，滑动滚动条，背景不会动，但是滑动其祖先元素（如果该祖先元素也有滚动条的话），背景也会跟着元素一起滑动（相对于其祖先元素）
• fixed（相对于浏览器可视区设置的，元素本身只负责呈现视口内（与 background-clip 和 background-origin 有关）的背景）
  • 可以视作背景固定在了浏览器可视区的一个位置，无论是滑动元素的滚动条，还是滑动祖先元素的滚动条，背景都不会动（但是滑动祖先元素的滚动条的话，背景可能会消失在元素的视区里）

background-size（设置 background-image 的大小）

属性值

取值类型
length
percentage
keyword	contain	cover	auto

• length 与 percentage 都可以用来设置宽高，配合 auto 使用可以达到按图片比例缩放的效果
• keyword
  • contain：一般用来将比元素背景区大的图片缩小到背景区能完全容纳（很有可能会产生空白，若有 background-color，则由 background-color 来进行填充）
  • cover：将图片按原比例尽量缩放至刚好覆盖整个背景区（但因为是按比例缩放，所以如有超出的部分，则被裁剪）

background-repeat（background-image 的重复方式）

属性值

有两个属性值，第一个值表示水平方向，第二个值表示垂直方向

单值	等价于双值
repeat-x	repeat no-repeat
repeat-y	no-repeat repeat
repeat	repeat repeat
space	space space
round	round round
no-repeat	no-repeat no-repeat

• repeat 不缩放图片，没有空隙，填充整行或整列的空间，图片多余的部分被裁剪掉
• space 不缩放图片与裁剪（除非图片大出背景区），使多出的空隙填充在 background-image 之间
• round 用缩放图片来填充整行或整列的空间