background-color
设置背景颜色
默认值:transparent(透明色)
background-image
设置背景图片
background-repeat:
设置背景图片的平铺方式
默认会自动沿着水平和竖直两个方向平铺(repeat)
no-repeat:背景图片不平铺
repeat-x:沿着水平方向平铺
repeat-y:沿着竖直方向平铺
background-position
设置背景图片的位置
该属性的值通常有两个,中间用空格隔开,用于定义背景图片在标签水平各竖直方向的坐标。默认为在左上角
1.可以使用不单位的数值(px)。
2.使用预定义的该关键字
水平方向:left|center|right
竖直方向:top|center|bottomm
background-position:20px 20px;
background-position:left center;
注意:
◆如果该属性设置一个值,那么另一个默认值代表cente
◆如果设置具体数字,那么第一个值代表水平方向,第二值代表垂直方向
◆可以设置负数,正数代表沿着坐标轴正方向移动,负数沿着反方向移动
background-size
设置背景图片的大小background-size:属性1 属性2;第一个为宽,第二个为高
属性值可以为迅速值,如果只设置一个值,第二个值默认为auto
还可以为百分比,以父标签的百分比设置背景图片的宽度和高度表。
cover:使背景图片按比例覆盖整个背景区域。
contain:使宽高自适于背景区域。
background属性联写
background:red url("1.png") no-repeat;
总结:
◆该属性联写没有个数的限制
◆没有顺序的限制
◆一般情况下 在网页中设置小图标的时候,考虑使用背景图片(装饰的效果)
◆一般情况下,在网页中如果是对某一件商品的展示,或者描述(插入图片)