CSS综合案例——超大背景图片的显示案例

最新推荐文章于 2023-03-12 20:57:39 发布

我吃饭很慢.

最新推荐文章于 2023-03-12 20:57:39 发布

阅读量284

点赞数

分类专栏： CSS综合案例文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_45586870/article/details/120883987

版权

CSS综合案例专栏收录该内容

16 篇文章 2 订阅

订阅专栏

超大背景图的显示，如下图王者荣耀的背景图：
在这里插入图片描述
先下载这个王者荣耀背景图，按F12，就会显示如下，然后按如下步骤下载图片：

如下代码，图片路径改成你自己下载保存的路径~
要让图片水平居中显示最核心的部分，就给它设定：background-position: center top
水平居中+垂直方向上靠上，这样就能水平居中显示图片，就能显示图片最核心的部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>超大背景图片</title>
    <style>
        body {
            background-image: url(images/bg.jpg);
            background-repeat: no-repeat;
            background-position: center top;
        }
    </style>
</head>

<body>

</body>

</html>