无名阁,只为技术而生。流水不争先,争的是滔滔不绝。

css背景图片全屏铺满自适应(详解大全)

前端 Micheal 1年前 (2023-11-23) 249次浏览 已收录 0个评论 扫描二维码

css背景图片全屏铺满自适应(详解大全)

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

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

方法一:background-size + background-position

这种方法使用了两个CSS属性:background-sizebackground-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

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

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

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

示例:

<!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>

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

java jdk环境变量 win10(配置步骤大全1)

喜欢 (0)
[]
分享 (0)
关于作者:
流水不争先,争的是滔滔不绝
发表我的评论
取消评论

评论审核已启用。您的评论可能需要一段时间后才能被显示。

表情 贴图 加粗 删除线 居中 斜体 签到