html - 修复图像以使其不会根据屏幕分辨率移动？

Question

我在我的 tumblr 布局的背景中固定了一个人的图像（我的 tumblr 是 tsuzami.tumblr.com），它在我的 1366 x 768 屏幕分辨率上看起来像这样：

但是当使用不同的屏幕分辨率在 screenfly 上进行预览时，该人被放置在明显看起来很愚蠢的尴尬位置：

无论分辨率如何，我如何将这张照片锁定在我想要的位置？这是我用于图像的代码：

<div style="position:fixed; top: 0px; left:-140px; z-index:-2;"><img src="http://i43.tinypic.com/j7ca2u.png"></div>

score 0 · Accepted Answer

很难避免这种情况，因为内容区域是 500 像素宽，并且随着屏幕变窄（即使在桌面上），内容将开始覆盖图像。我更倾向于将整个页面包装在容器 div 中，并将图像作为背景放在上面，然后在容器上设置最小宽度。一种更简单的方法是删除您当前拥有的图像 div，然后将这些样式添加到body元素中：

body {
background: url(http://i43.tinypic.com/j7ca2u.png) no-repeat -250px 0;
min-width: 1200px;
}

但是，我不太热衷于在body元素上设置最小宽度，因此最好将上面的这些样式添加到环绕整个页面的 div 中。

1 回答 1