Maison > Article > interface Web > 请问各位高手，怎么设置，使得网页窗口中的一张图片一直在浏览器窗口的中央，不管浏览器滚动条怎么拉动（也不管滚轮怎么滚动）_html/css_WEB-ITnose
请问各位高手，怎么设置，使得网页窗口中的一张图片一直在浏览器窗口的中央，不管浏览器滚动条怎么拉动（也不管滚轮怎么滚动）_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 12:20:021589parcourir
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> Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：怎么才能做到把select的值传到action中和把action的值赋给select_html/css_WEB-ITnoseArticle suivant：点击Chrome浏览器里的输入框后，会出现一个黄色的矩形框，怎么去掉这个？_html/css_WEB-ITnose