CSS实现背景图片全屏铺满自适应的3种方式

当我们想要将背景图片全屏铺满屏幕时，可以通过CSS来实现。以下是3种实现方法及示例说明：

方法一：background-size + background-position

这种方法使用了两个CSS属性：background-size和background-position，可以将背景图片缩放并调整其位置以铺满屏幕，并自适应不同分辨率。

body {
    background-image: url("example.jpg");
    background-size: cover;
    background-position: center center;
}

上面的代码中，background-image属性指定了要使用的背景图片，background-size属性将背景图片缩放到完全覆盖整个屏幕，background-position属性将背景图片定位到屏幕中心。

示例：

<!DOCTYPE html>
<html>
<head>
    <title>方法一：background-size + background-position</title>
    <style>
        body {
            background-image: url("https://via.placeholder.com/1200x800");
            background-size: cover;
            background-position: center center;
        }
    </style>
</head>
<body>
    <h1>这是一段测试文本</h1>
</body>
</html>

上面的示例中，背景图片使用了placeholder提供的占位图片，你可以使用你自己的图片。

方法二：100vh + 100vw

这种方法使用了100vh和100vw单位来实现全屏铺满，vh指的是视口高度，vw指的是视口宽度。

body {
    background-image: url("example.jpg");
    height: 100vh;
    width: 100vw;
    background-size: cover;
    background-position: center center;
}

上面的代码中，height和width属性分别设置为100vh和100vw可以让背景图全屏铺满，并保证其自适应不同的分辨率。

示例：

<!DOCTYPE html>
<html>
<head>
    <title>方法二：100vh + 100vw</title>
    <style>
        body {
            background-image: url("https://via.placeholder.com/1200x800");
            height: 100vh;
            width: 100vw;
            background-size: cover;
            background-position: center center;
        }
    </style>
</head>
<body>
    <h1>这是一段测试文本</h1>
</body>
</html>

方法三：CSS Grid布局

这种方法使用了CSS网格布局，可以在不使用图像缩放或裁剪的情况下自适应分辨率并填充整个屏幕。

body {
    display: grid;
    place-items: center;
    background-image: url("example.jpg");
    background-repeat: no-repeat;
    background-size: contain;
}

上面的代码中，display: grid;将容器转换为网格容器，place-items: center;将网格项在网格轴上居中对齐，background-repeat: no-repeat;取消背景图片的重复，background-size: contain;使背景图片以整个图片完整显示。

示例：

<!DOCTYPE html>
<html>
<head>
    <title>方法三：CSS Grid布局</title>
    <style>
        body {
            display: grid;
            place-items: center;
            background-image: url("https://via.placeholder.com/1200x800");
            background-repeat: no-repeat;
            background-size: contain;
        }
    </style>
</head>
<body>
    <h1>这是一段测试文本</h1>
</body>
</html>

上述三种方法都可以实现背景图片全屏铺满自适应的效果，选择哪一种方法可以根据自己的需要进行选择。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：CSS实现背景图片全屏铺满自适应的3种方式 - Python技术站

CSS实现背景图片全屏铺满自适应的3种方式

方法一：background-size + background-position

方法二：100vh + 100vw

方法三：CSS Grid布局

相关文章