css3支持为网页添加多个背景图片吗

130 阅读 0 评论 86 点赞

我是靠谱客的博主酷炫秀发，这篇文章主要介绍css3支持为网页添加多个背景图片吗，现在分享给大家，希望可以做个参考。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

在CSS中使用多个背景图片

如果想在背景中添加一张以上的图片怎么办？CSS3 中可以直接指定多个背景路径，如下所示：

复制代码body {
  background-image: url(https://image.flaticon.com/icons/svg/748/748122.svg), url(https://images.unsplash.com/photo-1478719059408-592965723cbc?ixlib=rb-1.2.1&auto=format&fit=crop&w=2212&q=80);
  background-position: center, top;
  background-repeat: repeat, no-repeat;
  background-size: contain, cover;
}1
2
3
4
5
6
body {
  background-image: url(https://image.flaticon.com/icons/svg/748/748122.svg), url(https://images.unsplash.com/photo-1478719059408-592965723cbc?ixlib=rb-1.2.1&auto=format&fit=crop&w=2212&q=80);
  background-position: center, top;
  background-repeat: repeat, no-repeat;
  background-size: contain, cover;
}
登录后复制

效果图：