CSS背景属性
- background>>在一个声明中设置所有的背景属性
//一般按以下顺序书写
body{
background:red url(‘‘) no-repeat fixed center;
}
<!--通过设置背景颜色实现线性渐变效果，语法为：linear-gradient(角度,开始颜色,结束颜色)-->
body{
background:linear-gradient(90deg,red,yellow);
}
- background-attachment>>设置背景图像是否固定或者随着页面的其他部分滚动
属性值：
- scroll 默认值。背景图像会随着页面其余部分的滚动而滚动。（图像相对元素固定）
- fixed 当页面其余部分滚动时，背景图像不会移动。（图像会浮于元素内容之上，相对于视口固定）
- local 背景和内容一起滚动。（图像相对于元素内容固定） - background-color>>设置元素背景颜色
属性值：
- color_name 规定颜色值为颜色名字（如red）
- hex_name 规定颜色值为十六进制（如#ccc）
- rgb_name 规定颜色值为rgb值（如rgb(255,0,0)）
- transparent 默认，背景颜色为透明 - background-image>>设置元素的背景图像
属性值：
- url(”) 指向图像的路径
- none 默认值，不显示背景图像 - background-position>>设置背景图像的开始位置
属性值：
- top left
- top center
- top right
- center left
- center center
- center right
- bottom left
- bottom center
- bottom right
- 以上若只设置了一个值，第二个值则默认为“center”
- x% y% 若只设置了一个值，第二个值则默认为50%
- xpos ypos 若只设置了一个值，第二个值则默认为50%（可以混合使用%和position值） - background-repeat>>设置是否及如何重复背景图像
属性值：
- repeat 默认，背景图像将在垂直方向和水平方向重复
- repeat-x 背景图像将在水平方向重复
- repeat-y 背景图像将在垂直方向重复
- no-repeat 背景图像将仅显示一次 - background-clip>>规定背景的绘制区域
属性值：
- border-box 默认值，背景被裁到边框盒
- padding-box 背景被裁到内边距框
- content-box 背景被裁到内容框 - background-origin>>规定背景图片的定位区域
属性值：
- padding-box 默认值，背景图像相对于内边距框来定位
- border-box 背景图像相对于边框盒来定位
- content-box 背景图像相对于内容框来定位 - background-size>>规定背景图片的尺寸
属性值：
- length 设置背景图像的宽、高（若只设置一个值，高则定义为auto）
- percentage 以父元素的百分比来设置背景图像的宽度和高度（若只设置一个值，高则定义为auto）
- cover 保持图片本身比例，横向铺满父元素
- contain 保持图片本身比例，纵向铺满父元素