请问各位高手，怎么设置，使得网页窗口中的一张图片一直在浏览器窗口的中央，不管浏览器滚动条怎么拉动（也不管滚轮怎么滚动）_html/css

请问各位高手，怎么设置，使得网页窗口中的一张图片一直在浏览器窗口的中央，不管浏览器滚动条怎么拉动（也不管滚轮怎么滚动）_html/css_WEB-ITnose

WBOY

Freigeben： 2016-06-24 12:20:02

Original

1578 Leute haben es durchsucht

html

怎么设置，使得网页窗口中的一张图片一直在浏览器窗口的中央，不管浏览器滚动条怎么拉动（也不管滚轮怎么滚动）

回复讨论(解决方案)

绝对定位不行？

试试下面这段代码：

<!DOCTYPE html><html><head><title>模拟position:fixed</title></head><style>* { padding:0; margin:0;}body { height:100%; overflow:hidden; font-size:14px; line-height:2; position:relative;}html { height:100%; overflow:hidden;}.fixed { position:absolute; left:50%; margin-left:-100px; top:50%; margin-top:-100px; width:200px;height:200px; background:#fc0;}.wrapper { height:100%;overflow:auto; overflow-y:scroll;}#content { width:90%; margin:0 auto; background:#f2f2f2; padding:20px;}</style><body><img class="fixed" src="http://avatar.csdn.net/D/E/E/1_shn11160.jpg" alt="shn11160"/><div class="wrapper">    <div id="content"></div></div><script>    var str='';    for(i=0;i<100;i++){        str+= i + "<br />";    }    document.getElementById('content').innerHTML=str;</script></body></html>

Nach dem Login kopieren

但是滚动鼠标滚轮的时候位置怎么变呢？

对不起，是我描述有误。
我想做的效果是随着鼠标滚轮滚动，图片有随着滚动条滑动的效果

滚动的什么效果？闪烁但是一直在原来的位置？
一直在浏览器的中央，获得屏幕分辨率，把图片设置在中央，然后position： fixed。

在我看来，要实现这个效果有几个方法（主要还是看浏览器支持）
最好的办法就是先居中对齐一下，然后用定位：CSS position: fixed;

如果浏览器不支持就先用javascript定位，然后监听下拉条动作

将图片设为背景图片，然后设置background-attachment属性为fixed,代码如下：

<html>    <head>        <style type="text/css">            body{                background-image:url("testImg/3.jpg");                background-repeat: no-repeat;                background-attachment: fixed;                background-size: 200px;                background-position: center;                background-color: #acacac;            }            div{                height: 200%;            }            </style>    </head>    <body>        <div></div>    </body></html>

Nach dem Login kopieren