前端css基础篇（三） background背景元素position定位以及清除浮动的四种方法

一、 background背景元素

1. background-color背景颜色

可以简写 background；默认值是transparent。（透明） 不能继承

2. background-image背景图片

可以简写background

• url（“图像的url路径地址”）图像的URL；
• none 表示背景上没有设置任何图像，这是默认值；
• inherit 指定背景图像应该从父元素继承
• background-image：url（‘pic.png’）,url(‘pic1.png’)…可以引入多张图片

3.background-repeat背景重复

不可以简写background

• 指定如何重复背景图像，默认情况下，重复background-image的垂直和水平方向。
• repeat 背景图像将向垂直和水平方向重复，默认
• repeat-x 只有水平位置会重复背景图像
• repeat-y 只有垂直位置会重复背景图像
• no-repeat background-image不会重复，不平铺
• inherit 指定background-repea属性设置应该从父元素继承

４. background-position背景定位

• background-position属性设置背景图像的起始位置
• xpos ypos第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是长度px，关键字和百分数值
• 关键字成对出现left right top bottom center，如果仅指定一个关键字，其他值将会是"center"
• x% y% 第一个值是水平位置，第二个值是垂直。左上角是0%0%。右下角是100%100%.如果仅指定了一个角，其他值将是50%，默认0%0%

５. background-attachment背景关联

• 设置背景图像是否固定或者随着页面的其余部分滚动
• scroll 背景图片随着页面的其余部分滚动- 默认
• fixed 背景图像是固定的
• inherit 指定backgrund-attachment的设置应该从父元素继承