（1）background-clip 背景的绘制位置

background-clip： border-box（默认，背景被裁剪到边框盒） padding-box（背景被裁剪到内边距框） content-box（背景被裁剪到内容框）

（2）background-image 设置背景图像

• none，不显示背景图像；inherit，继承父元素
• url('') 图像文件链接
• linear-gradient() 线性渐变
• radial-gradient() 径向渐变

（3）背景图片的处理

• background-size：背景图片大小
• background-repeat：背景图片是否重复
• background-position：背景图片的位置，两个参数：分别是x轴和y轴的位置；支持三种值：top left, x% y%, x px y px

background-size： 默认为图片原始尺寸
cover（等比缩放，直到宽高都覆盖了背景区域）
contain（等比缩放，宽、高其中之一达到背景区域即可）
50% 50%（宽度、高度占父元素的百分比）
50%（只提供一个参数，高度默认为auto）
100px 100px（直接设置宽高）

background-repeat： repeat（默认） no-repeat repeat-x repeat-y

background-position： top left（默认） center bottom right

（4）backgroun-origin 规定 background-position 属性相对于什么位置来定位

如果背景图像的 background-attachment 属性为 “fixed”，则该属性没有效果！

backgroud-origin： border-box padding-box（默认值） content-box

返回首页