美文网首页
添加背景图片以及设置

添加背景图片以及设置

作者: 张培_ | 来源:发表于2018-01-12 22:04 被阅读22次

    添加背景图片以及设置

    background

    • 作用:是用来集中设置各种背景属性
    • 例子:
    background: url('./assets/acg.png') center no-repeat;
    

    background-image

    • 作用设置背景图片的url:
    • 例子
      background-image: url('./assets/acg.png');
    

    以上两者区别

    • 前者:是background的各种属性的集合(其中包含background-image)
    • 后者:是background中的一个属性

    background-size

    cover

    • 作用:按比例缩放图片,让图片覆盖整个容器。
    • 弊端:可能会造成部分背景图片显示不出来
    • 例子

    contain

    • 作用:按比例缩放图片,让图片全部容纳在容器中
    • 弊端:可能导致容器一部分空白
    • 例子


      Pasted_Image_12_01_2018__10_06_PM.png

    相关文章

      网友评论

          本文标题:添加背景图片以及设置

          本文链接:https://www.haomeiwen.com/subject/sedqoxtx.html