MyException - 我的异常网
当前位置:我的异常网» HTML/CSS » 请教,如何设置,使得网页窗口中的一张图片一直在浏

请教,如何设置,使得网页窗口中的一张图片一直在浏览器窗口的中央,不管浏览器滚动条如何拉动(也不管滚轮如何滚动)

www.myexceptions.net  网友分享于:2013-04-10  浏览:25次
请问各位高手,怎么设置,使得网页窗口中的一张图片一直在浏览器窗口的中央,不管浏览器滚动条怎么拉动(也不管滚轮怎么滚动)
怎么设置,使得网页窗口中的一张图片一直在浏览器窗口的中央,不管浏览器滚动条怎么拉动(也不管滚轮怎么滚动)
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>

------解决方案--------------------
将图片设为背景图片,然后设置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>

文章评论

软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有