background的使用

来源:互联网 发布:淘宝818会有活动吗 编辑:程序博客网 时间:2024/06/08 07:19
  • 将容器的高度固定(410px)
  • 将轮播图改为背景显示
  • 由于可能图片的高度不一定是410px
  • 所以需要设置css3中的background-size

    background-size的使用
    -length :
    background-size:100px 100px 将背景图片固定到什么大小
    -percentage:
    background-size:90% 90% 以百分比的形式设置图片的大小
    -cover:
    +背景图片等比例缩放
    让背景图片铺满整个窗口

    • 如:一张100*200的背景图放到一个300*400的盒子中,最终背景图片的大小是300*600
      • 因为背景图的较小边为100,将100放大到目标容器300的宽度,放大了3倍,最终结果300*600
        -contain:
      • 1.背景图片等比例缩放
      • 2.让背景图相对较大边放大到目标容器大小结束
      • 如:一张100*200的背景图放到一个300*400的盒子中,最终背景图片的大小是200*400
      • 因为背景图的较大边为200,将200放大到目标容器400的高度,放大了2倍,最终结果200*400
        contain可能会出现空白
原创粉丝点击