html让背景颜色有过渡效果,前端html--背景，文本，过渡效果属性

1. 背景相关属性

1. 背景颜色

属性 : background-color

取值 : 颜色值

2. 背景图片

属性 : background-image

取值 : url(‘‘)

3. 背景图片相关属性

1. 背景图片重复平铺显示

属性 : background-repeat

取值 :

1. repeat (默认值)

当图片尺寸小于元素尺寸,会自动沿水平和垂直方向

重复平铺,直到铺满元素

2. repeat-x

设置图片沿水平方向平铺

3. repeat-y

设置图片沿垂直方向平铺

4. no-repeat

设置图片不重复平铺

2. 背景图片的尺寸

属性 : background-size

取值 :

1. 像素值

取两个值,分别表示背景图片的宽和高;

取一个值,设置背景图片宽度,高度等比缩放

2. 百分比

百分比取一个值或两个值等同于像素的取值情况

百分比参照当前元素的宽高计算

---------------

3. cover

覆盖,等比拉伸图片至足够大,完全覆盖元素

4. contain

包含,等比拉伸图片至刚好被元素容纳的最大尺寸

3. 背景图片的位置

属性 : background-position

取值 :

1. 像素值 x y

x表示背景图片水平偏移距离,正值表示向右

y表示背景图片垂直偏移距离,正值表示向下

默认背景图片从元素左上角显示

2. 百分比