html设置页面背景图片并禁止页面缩放

最新推荐文章于 2025-07-18 11:02:58 发布

原创最新推荐文章于 2025-07-18 11:02:58 发布 · 7.4k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#html #背景图片 #禁止缩放

html 同时被 2 个专栏收录

1 篇文章

订阅专栏

前端

1 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS设置网页背景图片的方法，并通过meta标签禁止了页面缩放，确保了在不同设备上的一致显示效果。

示例代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <!--禁止页面缩放-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" charset="UTF-8">
    <title>设置背景图片并禁止页面缩放</title>
</head>
<body>
<!--设置背景图片，z-index = -1表示图片元素处于页面层级的底部，即背景图片-->
<img src="/background.png" style="position:absolute; width:100%; height:100%; left:0; top:0; z-index:-1;"/>
<p>测试</p>
</body>
</html>