css 中 background:url 背景图片如何铺满并正常显示

前言

css 中 背景图片如何铺满并正常显示

方案

1.铺满body区（用做网页背景）

.body{
    background:url('../imgs/beijing.jpg') no-repeat center 0px;
    background-position: center 0px;
    background-size: cover;
}

2.只让该图片铺满一个元素区域

.kuang{
    height: 300px;
    width: 300px;
    background:url('../imgs/beijing.jpg') no-repeat center 0px;
    background-position: center 0px;
    background-size: cover;
    text-indent: -999px;
}

说明

url('图片路径') – 图片路径的位置；

no-repeat –  图片不重复

center 0px –  center是距离页面左边的定位，0px是距离页面上面的定位

background-position: center 0px –  就是图片的定位，同上

background-size: cover –  把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中

min-height: 100vh –  视窗的高度，“视区”所指为浏览器内部的可视区域大小，即window.innerWidth/ window.innerHeight大小