css中background背景的应用

background背景

background-color背景颜色

background-image: url（），url()统一资源路径，括号里是图片的地址，需要加引号

background-repeat:背景平铺；取值：repeat默认值，在水平方向和垂直方向都平铺；no-repeat背景图不平铺；repeat-x、repeat-y在x轴或y轴平铺。

background-attachment：设置背景图像是否固定或者随着页面的其余部分滚动

值	描述
scroll	背景图片随着页面的滚动而滚动，这是默认的。
fixed	背景图片不会随着页面的滚动而滚动。
local	背景图片会随着元素内容的滚动而滚动。
initial	设置该属性的默认值。
inherit	指定 background-attachment 的设置应该从父元素继承。

background-size 属性（设置背景图片大小）第一个值设置宽度，第二个值设置的高度；如果只给一个值，第一个值是宽度，第二个是设置为 元素本身高度

background-position 属性设置背景图像的起始位置。取值：关键字（top、right、bottom、left、center）；偏移量（第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅给定了一个值，其他值将是50％。 。默认值为：0％0％）

background-clip和background-origin的区别是：border-box边框盒的左上角开始显示，但如果给了padding-box、content-box就会从填充盒和内容盒的左上角开始显示，但背景实际存在还是从边框盒开始的，只不过边框盒部分不显示；而background-origin就是给什么值就从什么子盒子的左上角渲染。（如果是背景颜色它们在页面上看起来区别不大，但如果是背景图片区别就很明显）

background-clip:设置背景的显示区域

• border-box（默认值） 边框盒的左上角开始

• padding-box（默认值） 填充盒盒的左上角开始

• content-box（默认值） 内容盒的左上角开始

background-origin:设置背景的渲染区域

• border-box（默认值） 边框盒的左上角开始

• padding-box（默认值） 填充盒盒的左上角开始

• content-box（默认值） 内容盒的左上角开始