CSS3 多个背景图像、线性渐变从上到下(默认)、线性渐变从左到右

CSS3 多个背景图像

CSS3 允许你在元素上添加多个背景图像。背景与背景直接用 ,逗号间隔。多背景设置的时候，我们要结合background-position和background-repeat一起去使用，才有效果。

background-image: url('./img/img_flwr.gif'), url('./img/paper.gif');

 

background-image: url('./img/img_flwr.gif'), url('./img/paper.gif');

特别注意：多背景图，从右侧还是计算，你使用图的 先后顺序。

右侧 第一个图，是你使用的第一个图。

右侧 第二个图，是你使用的第二个图。以此类推。

background-repeat: no-repeat , repeat;

多背景图，平铺：

background-repeat: no-repeat , repeat;

从右侧还是计算，你使用图的 先后顺序。

右侧 第一个repeat 表示 使用的第一个图的平铺方式为：平铺。

右侧 第二个no-repeat 表示 使用的第一个图的平铺方式为：不平铺

 background-position: right bottom,left top;

 

多背景图，定位：

background-position: right bottom,left top; 从右侧还是计算，你使用图的 先后顺序。