请教，如何设置，使得网页窗口中的一张图片一直在浏览器窗口的中央，不管浏览器滚动条如何拉动（也不管滚轮如何滚动）
日期：2014-05-17 浏览次数：20676 次
请问各位高手，怎么设置，使得网页窗口中的一张图片一直在浏览器窗口的中央，不管浏览器滚动条怎么拉动（也不管滚轮怎么滚动）
怎么设置，使得网页窗口中的一张图片一直在浏览器窗口的中央，不管浏览器滚动条怎么拉动（也不管滚轮怎么滚动）
------解决方案--------------------
试试下面这段代码：
------解决方案--------------------
将图片设为背景图片，然后设置background-attachment属性为fixed,代码如下：
怎么设置，使得网页窗口中的一张图片一直在浏览器窗口的中央，不管浏览器滚动条怎么拉动（也不管滚轮怎么滚动）
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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
