css如何设置背景图片布满全屏

第一段

在HTML和CSS中，设置背景图片布满全屏的方法有多种。其中，运用CSS3中的background-size属性是一个比较常见的方法。我们可以将HTML的body元素的高度设置为100%，并在CSS中将背景图片覆盖在body元素上，通过background-size: cover将图片铺满整个页面。具体代码如下：

    body {
        background-image: url("your-image.jpg");
        background-size: cover;
        height: 100%;
    }

第二段

除了background-size: cover，background-size: contain也可以使得背景图片铺满整个页面。在这种情况下，图片是在保持原图比例的基础上，尽可能的大并在可视区域内居中展示。具体代码如下：

    body {
        background-image: url("your-image.jpg");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        height: 100%;
    }

第三段

如果我们想要将图片覆盖在整个页面并使其与内容无冲突，可以通过position: absolute实现。代码如下：

    body {
        background-image: url("your-image.jpg");
        background-size: cover;
        height: 100%;
        position: relative;
    }
    main {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
    }

在以上代码中，我们在body中设置position: relative，使其有效的父元素成为定位的基准点。并将main元素通过position: absolute放置在页面的最上层，以达到内容与背景图片的分离效果。

第四段

除此之外，还有一种比较简单的方法就是使用CSS3的linear-gradient属性为背景图片进行渐变处理，达到背景与内容不冲突的效果。代码如下：

    body {
        background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('your-image.jpg') center no-repeat;
        background-size: cover;
        height: 100%;
    }

在以上代码中，我们使用了两个颜色值进行渐变（rgba(0,0,0,0.3)），可以通过修改这两个值来调整渐变的深度和透明度。