添加背景图片以及设置

添加背景图片以及设置

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
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。