Heim >Web-Frontend >HTML-Tutorial >请问各位高手，怎么设置，使得网页窗口中的一张图片一直在浏览器窗口的中央，不管浏览器滚动条怎么拉动（也不管滚轮怎么滚动）_html/css_WEB-ITnose
请问各位高手，怎么设置，使得网页窗口中的一张图片一直在浏览器窗口的中央，不管浏览器滚动条怎么拉动（也不管滚轮怎么滚动）_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:20:021617Durchsuche
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> Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：怎么才能做到把select的值传到action中和把action的值赋给select_html/css_WEB-ITnoseNächster Artikel：点击Chrome浏览器里的输入框后，会出现一个黄色的矩形框，怎么去掉这个？_html/css_WEB-ITnose