soarli

background-image参数汇总
/*加载背景图*/ background-image:url(./images/backgrou...
扫描右侧二维码阅读全文
22
2020/06

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

最后修改:2020 年 06 月 22 日 06 : 36 PM

发表评论