javascript - 带封面的全屏背景，但专注于图像的一部分

Question

我希望一个 div 有一个覆盖整个 div 的背景图像，但是当浏览器窗口大小发生变化时不会缩小太多，而是将注意力集中在图像上的一个点上。

一个很好的例子就是这个，但是当您缩小窗口尺寸时，它会专注于黄色标志而不是图像的中间。

有这种东西的插件或教程吗？我确信使用 jquery 和 css 图像精灵我可以想出一些东西，但我宁愿使用经过验证的插件或技术，而不是一起破解一些东西。

score 8 · Accepted Answer

好吧，我想这远没有我想象的那么困难，但是我想要的行为可以通过这样做来实现：

{
background: url('http://farm8.staticflickr.com/7218/7289572558_44c110c510_h.jpg') no-repeat 95% 50%;
min-height: 100%;
background-size: cover;
}

score 1 · Accepted Answer

您可以添加背景位置和其他编辑..

这种方式应该调整..

background: url('IMG.PNG') no-repeat center center;
min-height: 100%;
background-size: cover;

提供位置支持

background-position-x: -100px;
background-position-y: 100px;

您将需要考虑背景大小，因为您将进行裁剪。

如果您在哪里考虑不将 BG 的大小限制为 Document 大小，您可以定位它（假设图像大于用户屏幕）然后溢出：隐藏以删除那些滚动条，但仍然不是最优雅的方式。

2 回答 2