CSS3背景

Posted 2020-07-10

1.背景的五种基本属性 background-color（背景颜色） background-image（背景图片） background-repeat（背景图片展示方式） background-attachment（背景图片是固定还是滚动） background-position（背景图片位置） 综合使用：background:[<background-color>][<background-image>][<background-repeat>][<background-attachment>][<background-position>]

2.background-color属性 语法：background-color:transparent || <color> transparent：透明色 color：颜色名、rgb色、hls值、十六进制值、rgba色、hsla值

3.background-image属性 语法：background-image:none || <url> none为默认值，没有的意思 url：图片地址，可以是相对地址，也可以是绝对地址

4.background-repeat属性 语法：background-repeat:repeat || repeat-x || repeat-y || no-repeat repeat：背景图片沿X轴和Y轴方向平铺 repeat-x：背景图片沿X轴方向平铺 repeat-y：背景图片沿Y轴方向平铺 no-repeat：背景图片不做任何平铺

5.background-attachment属性 语法：background-attachment:scroll || fixed scroll：背景图片随着页面的其余部分滚动 fixed：背景图片固定不动 注：取值fixed时，运用在html或body标签上，使用在其他标签不能达到固定效果

6.background-position属性 语法：background-position:[percentage] || [length] || [left | center | right] || [top | center | bottom] 作用：用来设置背景图片的位置 默认值：(0,0) || (0%, 0%) || (left top)，其值可以是具体的百分数或数值设置（可以是负值），也可以使用关键字left、center、top、right、top、bottom配合设置，个属性定位方式：