background-image参数汇总

    /*加载背景图*/
     background-image：url（./images/background.jpg）;
     /* 背景图垂直、水平均居中 */

    background-position: center center;

    /* 背景图不平铺 */

    background-repeat: no-repeat;

    /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
    background-attachment: fixed;  //此条属性必须设置否则可能无效/

    /* 让背景图基于容器大小伸缩 */
   background-size: cover;

   /* 设置背景颜色，背景图加载过程中会显示背景色 */
   background-color: #CCCCCC;
}

或简写为如下CSS样式：

  body{
   background:url(./images/background.jpg)  no-repeat center center;
   background-size:cover;
   background-attachment:fixed;
   background-color:#CCCCCC;
}

background-size中，100%和cover的区别
background-size：100% 100%;---按容器比例撑满，图片变形；

background-size：cover;---把背景图片放大到适合元素容器的尺寸，图片比例不变，但是要注意，超出容器的部分可能会裁掉。

参考资料：

blog.csdn.net/weixin_44433499/article/details/86219615

blog.csdn.net/wzj2584454/article/details/78100233

版权属于：soarli

本文链接：https://blog.soarli.top/archives/459.html

转载时须注明出处及本声明。