CSS让背景图适应整个屏幕（填满）

html代码如下<body>/*此处内容省略*/</body>使用css设置背景图片并且铺满整个屏幕（不重复），代码如下body{/*设置背景图片*/background-image: url("../images/background/back.jpg") ;background-size: 100% 100%;background-size: cover;backgro

Peanutty

18528人浏览 · 2022-01-17 23:23:05

Peanutty · 2022-01-17 23:23:05 发布

html代码如下

<body>

/*此处内容省略*/

</body>

使用css设置背景图片并且铺满整个屏幕（不重复），代码如下

body{
    /*设置背景图片*/
    background-image: url("../images/background/back.jpg") ;
    background-size: 100% 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;  /*关键*/
    background-position: center;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    min-width: 1600px;
    z-index: -10;
    zoom:1;
}

效果图

![在这里插入图片描述](https://img-blog.csdnimg.cn/9ce64877c601401dbde48aa6904e112f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUGVhbnV0dHk=,size_20,color_FFFFFF,t_70,g_s
e,x_16)