0

我的情况很奇怪，我真的不明白为什么......以及如何克服它。所以我必须将背景图片放在大小为 1920x860 的网站上。图像以不同的方式结束 - 例如：如果它没有延伸到整个窗口，图像的角落看起来很奇怪。

当我在 FF 中对此进行测试时，它看起来并不好。我在 22 英寸显示器上进行了测试（因此分辨率为 1680x ..）。当我在 Chrome 中测试时，图像延伸良好，看不到图像的角落。

但是：我有两台显示器，第二台是 23 英寸，因此分辨率与第一台没有太大区别，如果我在 Crome 上测试此页面，也可以，在 FF 上也可以。

然后我使用了firebug工具并尝试获取窗口的innerWidth。22 英寸显示器的内部宽度为 2124 像素，23 英寸显示器的宽度为 1776 像素。

如果有人能告诉我，我将不胜感激 - 为什么会这样？如果有人可以知道如何放置此图像以使其在每台显示器上都很好地扩展……那就更好了。

关键是 - 我必须将图像从一个角落延伸到另一个角落，并且在我的显示器上进行测试时，我不能确定其他用户会看到我所看到的:(

谢谢。

我会在这里发表评论......因为你们所有人都很友善，我只是尝试了许多不同的解决方案。关键是图像没有覆盖整个背景 - 应该看到并且底部应该有一些颜色......现在我使用简单的背景：url（）不重复顶部中心......

如果我使用 -cover- 图像被扩展 - 但我只需要垂直扩展。我也使用了 JS，但无法正常工作，因为页脚是该 bg-image 的一部分......并且全部连接起来。

也许，我只会使用@media .. 为更大的屏幕设置更大的图像（当然会使用更大的图像），但这也只适用于更大的屏幕，如果不是，我认为设计会崩溃。

4

1 回答 1

1

让我为您搜索一下（“css 窗口背景”的第一个结果）：

http://css-tricks.com/perfect-full-page-background-image/

简而言之：

html { 
    background: url(bg.jpg) no-repeat center center fixed;
    background-size: cover;
}

另见：http ://caniuse.com/#search=background-size

于 2012-11-27T09:12:58.467 回答