html背景图不随滚轮滚动，而且按住Ctrl并滚动滚轮时，图片不会变大缩小，就像百度的首页一样

发布网友发布时间：2022-05-12 09:53

共3个回答

懂视网时间：2022-05-12 14:15

本篇文章给大家带来的内容是关于html实现像百度的首页效果一样的背景图（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

之前在百度知道我提问过这一个问题，后来解决了。不过好多人来问我时怎么解决的，源码。
其实很简单。这里我贴一下代码。有需要的小伙伴不用再加我qq了，直接来这里取吧。

里面的图片是我随便找的。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title></title>
 <style>
 html,
 body {
 height: 100%;
 }
 body {
 margin: 0;
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
 background-attachment: fixed;
 background-image: url(http://pic1.win4000.com/wallpaper/b/589d687069ed9.jpg);
 }
 h1{
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
 color:#fff;
 background-color: rgba(0,0,0,0.5);
 display: -webkit-flex;
 display: -moz-flex;
 display: -ms-flex;
 display: -o-flex;
 display: flex;
 justify-content: center;
 align-items: center;
 }
 </style>
</head>
<body>
 <h1>按住Ctrl+滚动滚轮：可以看到文字缩放，背景不动</h1>
</body>
</html>

热心网友时间：2022-05-12 11:23

background-attachment:fixed;这个就是背景不随着网页滚动.请不要给body高度，请采纳

热心网友时间：2022-05-12 12:41

我找到方法了！