多个背景HTML

介绍

在网页设计中，背景图片可以让网页更加生动有趣，单一的背景图可能会让网页显得单调，这时候多个背景图片的应用将会呈现出全新的效果。

HTML5中提供了通过CSS3的多重背景图片技术来实现多个背景图的应用。多重背景图片不仅只能通过单一的图片来实现，而且还可以通过线性渐变或径向渐变的方式作为背景图应用到页面上。在本文中，我们将介绍如何使用多个背景图和CSS3的线性渐变或径向渐变来实现多种多样的页面效果。

多个背景图

通过CSS3的多重背景图片技术，我们可以给一个元素应用多个背景图片，我们可以通过以下代码实现：

.background {
  background-image: url(bg1.jpg), url(bg2.jpg), url(bg3.jpg);
  background-position: center center, left top, right bottom;
  background-repeat: no-repeat;
}

通过设置 background-image 属性，值为多个背景图片路径，我们就可以为元素添加多个背景图片。同时，我们还可以设置每个背景图片的位置和是否平铺。在上面的代码中，我们设置了三个背景图片，分别为 bg1.jpg, bg2.jpg, bg3.jpg，它们的位置分别为居中、左上和右下，而且都不平铺。

渐变背景

CSS3提供了两种渐变方式：线性渐变和径向渐变。

线性渐变

线性渐变是在两个或多个颜色之间进行过渡的一种效果。使用线性渐变来设置背景图的话可以带来平滑过渡的效果，增加网页的视觉效果。

下面是一个例子：

.gradient-bg {
  background-image: linear-gradient(to bottom, #e6f0ff, #fff);
}

上面的代码例子使用了线性渐变效果，从浅蓝色渐变到白色，效果如下图：

径向渐变

径向渐变是在一个起点进行颜色过渡的一种效果。使用径向渐变来设置背景图的话可以呈现出一个很美的流水效果，增加网页的美观度。

下面是一个例子：

.radial-gradient-bg {
  background-image: radial-gradient(circle, #159957, #155799);
}

上面的代码例子使用了径向渐变效果，从深绿色渐变到深蓝色，效果如下图：

以上是多个背景HTML的介绍，希望能够帮助你更好的使用背景图片，制作出更美观的网页。