请问各位高手，怎么设置，使得网页窗口中的一张图片一直在浏览器窗口的中央，不管浏览器滚动条怎么拉动（也不管滚轮怎么滚动）_html/css_WEB-ITnose
- WBOY原创
- 2016-06-24 12:20:021603浏览
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> 但是滚动鼠标滚轮的时候位置怎么变呢？
对不起，是我描述有误。
我想做的效果是随着鼠标滚轮滚动，图片有随着滚动条滑动的效果
滚动的什么效果？闪烁但是一直在原来的位置？
一直在浏览器的中央，获得屏幕分辨率，把图片设置在中央，然后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> 声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn