css多个背景图_如何使用CSS3多个背景

使用CSS添加背景图片并不是什么新鲜事，此功能自诞生以来就一直存在。 但是， 我们仅限于在一个声明块添加一张图片。 现在， CSS3通过向您提供添加多个背景的选项来提高风险。

如何使用它？

在过去，当我们需要添加多个背景图像时，我们很可能会中断HTML结构，并添加更多的类以通过CSS实现所需的结果，诸如此类。

.overcast1 {
	background-image: url("images/overcast.png");
	background-position: 150px 25px;
}
.rainbow {
	background-image: url("images/rainbow.png");
	background-position: 200px 10px;
}
.overcast2 {
	background-image: url("images/overcast.png");
	background-position: 250px 25px;
}
.sunny {
	background-image: url("images/sunny.png");
	background-position: 100px 10px;	
}

上面的代码显然是多余的。 在CSS3中 ，此代码可以串联在单个background-image属性中，如下所示；

.weather {
  width: 500px;
  height: 280px;
  margin: 50px auto;
  background-image: url("images/overcast.png"),
			  url("images/rainbow.png"), 
			  url("images/overcast.png"), 
			  url("images/sunny.png");
  background-position: 150px 25px, 
			  200px 10px, 
			  250px 25px, 
			  100px 10px;
  background-repeat: no-repeat;
}

在此代码中，我们将相同的四个图像添加到了不同的位置，从而产生了惊人的结果。

• 观看演示

添加动画效果

此外，通过添加CSS3动画 ，我们可以使结果更加惊人。 为了简化编码，我们将仅使用W3C的标准语法，但是请记住，IE9，Firefox，Opera，Chrome和Safari等浏览器仍需要它们各自的前缀才能起作用。

@keyframes weather { 
  0% {
    background-position: 120px 25px, 200px 10px, 280px 25px, 80px 10px;
  }
  100% {
    background-position: 150px 25px, 200px 10px, 250px 25px, 100px 10px;
  }
}

一旦指定了@keyframes ，则只需将具有关键帧名称的动画添加到预期的选择器中，在这种情况下为.weather ；

.weather {
  animation: weather 5s;
}

就是这样，我们现在可以从下面的链接中看到动画效果，并下载源代码以进行进一步检查。

• 观看演示
• 下载源

浏览器支持

根据CanIUse.com的说法 ，以下浏览器已支持CSS3多个背景； IE9 +，Firefox 3.6+。 Internet Explorer 8运气不好。 但是，如果您可以放心地将IE8留在后面，则可以立即使用CSS3多个背景 。

其他参考

• 使用CSS多个背景 – MDN
• CSS3后台模块3 – W3.org

翻译自: https://www.hongkiat.com/blog/css3-multiple-backgrounds/