背景
1、背景颜色
2、背景图片
平铺 background-repeat: no-repeat repeat-x repeat-y
位置 background-position: x值 y值; right center bottom(y) left top(y)
正值 负值 选择照片特定的图像
3、滚动
background-attachment:fixed(固定) scroll(滚动)
4、尺寸
background-size 宽 高 ;只指定一个值,另外一个等比例缩放
关键字 contain 优先显示完整图片 cover 优先铺满这个元素
5、 背景图的位置:
background-position:
第一个值代表图片在X轴方向上的位置
第二个值代表图片在Y轴方向上的位置(注意在这里Y轴向下是正方向)
还可以用方向关键字来描述背景图片的位置 center
x left right center
y top bottom center
用具体的数字 可以用正值 也可以用负值
当我们去指定背景图片的位置,只指定一个值的时候,另一个值默认为center
5、linear-gradient 线性渐变
第一个参数[可选]
<side or corner>?
case:
to left 从右到左
to right 从左到右
to top right 从左下角到右上角
angle
case:
45deg 两个颜色的交界线大约是45度;
后面的参数[两个或多个]
color <color-stop>?
case:
red
red 50%
6、background-repeat 重复背景图像
repeat-y 只有垂直位置会重复背景图像
repeat-x 只有水平位置会重复背景图像
no-repeat 不会重复