Question

所以这就是我拥有的代码......

<head>

<style type="text/css">

* { margin : 0; padding : 0; }

html, body { height:100%; color : #FFF;}

div#bgcontext { position : absolute; width : 100%; height : 100%; overflow : hidden; }

div#background { position : relative; right : 50%; width : 100%; height : 100%; z-index : -20; text-align : center;}

div#background img { min-height: 100%; min-width : 1600px; max-width : 100%; margin-right : -100%;}

</style>

</head>

<body>

<div id="bgcontext">

<div id="background"><img src="assets/bg.jpg" /></div>

</div>

</body>

正如您所看到的，我已经设置了一个可以满足全屏分辨率的居中和缩放图像 - 但是，我在设置完所有内容后意识到......这只有在内容不需要您的情况下才能生效滚动。

HALP。

Answer 1

啊哈！我实际上并没有使用“固定”定位属性，而是更改了

div#background { position : relative; right : 50%; width : 100%; height : 100%; z-index : -20; text-align : center;}

到

div#background { position : fixed; right : 50%; width : 100%; height : 100%; z-index : -20; text-align : center;}

完美解决了这个问题！甜蜜......嗯嗯CSS

可拉伸，固定，居中的壁纸？我很接近......真的很近

1 个答案: