Could you please tell me how to set it up so that a picture in the web page window is always in the center of the browser window, no matter how the browser scroll bar is pulled (and no matter how the scroll wheel is rolled)_html/css

Could you please tell me how to set it up so that a picture in the web page window is always in the center of the browser window, no matter how the browser scroll bar is pulled (and no matter how the scroll wheel is rolled)_html/css_WEB-ITnose

WBOY

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

Original

1616 people have browsed it

html

How to set it so that a picture in the web page window is always in the center of the browser window, no matter how the browser scroll bar is pulled (and no matter how the scroll wheel is rolled)

Reply to discussion (solution)

Absolute positioning doesn’t work?

Try the following code:

<!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>

Copy after login

But how does the position change when rolling the mouse wheel?

Sorry, my description was wrong.
The effect I want to achieve is that as the mouse wheel scrolls, the picture will have the effect of sliding with the scroll bar

What is the effect of scrolling? Flashing but staying in the same position?
Keep it in the center of the browser, get the screen resolution, set the image in the center, and then position: fixed.

In my opinion, there are several ways to achieve this effect (mainly depends on browser support)
The best way is to center-align it first, and then use positioning: CSS position: fixed;

If the browser does not support it, use javascript to locate it first, and then monitor the drop-down bar action

Set the image as the background image, and then set the background-attachment attribute to fixed. The code is as follows:

<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>

Copy after login