示意图:

(图1)

(图2)

(图3)

(图4a)

(图4b)

(图5)

参考文章

background-position 属性

background-size 属性

CSS gradient渐变之webkit核心浏览器下的使用

CSS3 经典教程系列:CSS3 线性渐变(linear-gradient)