CSS背景属性

一、任务目标

掌握使用CSS设置背景

二、任务背景

在前端开发过程中，为了页面的美观，往往都会给HTML元素添加背景，使用CSS（层叠样式表）背景属性能够在页面美化的同时，实现页面的表现与内容分离。

三、任务内容

属性	属性值	说明
background-color	颜色值，如rgb，rgba，十六进制表示等，设置为transparent表示背景透明	设置背景颜色
background-image	url( filepath ) 或 none	设置背景图像
background-size	宽高、百分比宽高、contain、cover	设置背景图片尺寸
background-repeat	repeat/ repeat-x/ repeat-y	设置背景图片重复方式
background-position	top left/ top center/ center等	设置背景图片的位置

1、background-size属性

1.1 contain

• 保持图片纵横比例缩放背景图片，使背景图片能够在背景区域完全显示

• 有可能出现图片无法完全覆盖背景区域

1.2 cover

• 保持图片纵横比不变，最大程度覆盖背景区域

• 有可能导致背景图片部分区域无法显示

2、background-repeat

2.1、repeat（默认）

• 允许水平和垂直方向重复（平铺）背景图片

2.2、repeat-x

• 只允许水平方向重复（平铺）背景图片

2.3、repeat-y

• 只允许垂直方向重复（平铺）背景图片

3、background

• 简写属性可以在一个属性声明中设置一个或多个背景属性，常用的属性设置如上表

• background-position 的属性值必须写在background-size 的属性值的前面(background-size的属性值前面要加个 \ )

background: #ff0000 url('smiley.gif') no-repeat cover;