CSS中的background添加了很多属性(截图来自网络),做个笔记熟悉一下。
该图来自网络
1、background-attachment
属性值:fixed | scroll | local;
默认值:scroll,同时所有元素;
fixed: 背景图像相对于窗体固定。
scroll: 背景图像相对于元素固定。当元素内容滚动时背景图像不会跟着滚动,因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。
local: 背景图像相对于元素内容固定。当元素随元素滚动时背景图像也会跟着滚动,因为背景图像总是要跟着内容。(CSS3)
2、background-clip
属性值:border-box | padding-box | content-box | text
默认值:border-box
padding-box: 从padding区域(不含padding)开始向外裁剪背景。
border-box: 从border区域(不含border)开始向外裁剪背景。
content-box: 从content区域开始向外裁剪背景。
从上面的图应该很容易就看出其中那个的差别和用法,background-clip用来裁剪背景图片,使用不同
的属性值达到不同的效果。
从字面上来理解很很简单:
border-box 是一个宽度=border+padding+content的盒子;
padding-box是一个宽度=padding+content的盒子;
border-box 是一个宽度=content的盒子;
把一个上下底面穿透的盒子放在图片上,从顶上俯瞰。管中窥豹的感觉,有木有!
3、background-origin
属性值:border-box | padding-box | content-box;
默认值:padding-box;
padding-box: 从padding区域(含padding)开始显示背景图像。
border-box: 从border区域(含border)开始显示背景图像。
content-box: 从content区域开始显示背景图像。
理解参照background-clip
4、background-size
属性值:[ <length> | <percentage> | auto ]{1,2} | cover | contain;
默认值:auto;
length: 用长度值指定背景图像大小。不允许负值。
percentage: 用百分比指定背景图像大小。不允许负值。
auto: 背景图像的真实大小。
cover: 将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器。
contain: 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内。