• 技术文章 >web前端 >css教程

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

    青灯夜游青灯夜游2021-04-06 19:08:34原创78

    css3支持为网页添加多个背景图片。在css中,可以通过直接在background-image属性中指定多个背景路径来为网页添加多个背景图片,语法格式“background-image: url(图片地址), url(图片地址)...;”。

    本教程操作环境: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.png

    完整示例地址:https://codepen.io/duomly/pen/eYpVoJR

    (学习视频分享:css视频教程

    以上就是css3支持为网页添加多个背景图片吗的详细内容,更多请关注php中文网其它相关文章!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:css3 背景图片
    上一篇:使用css3中的什么规则来定义动画 下一篇:css如何设置透明度
    第15期线上培训班

    相关文章推荐

    • 使用CSS3实现简单时间轴效果(附代码)• CSS3如何实现流星雨效果?(代码示例)• 详解CSS3+SVG滤镜实现不规则边框的方法• 用css3实现一个奥运五环• 使用css3中的什么规则来定义动画

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网