全屏幕背景与封面，但专注于图像的一部分

Question

我希望div有一个覆盖整个div的背景图像，但是当浏览器窗口大小改变时不会缩小太多而是聚焦到图像上的某个点。

一个很好的例子是this，但是当你使窗口尺寸变小时，它会聚焦在黄色标志上而不是图像的中间位置。

是否有针对此类内容的插件或教程？我确信使用jquery和css图像精灵我可以想出一些东西，但我宁愿使用经过验证的插件或技术，而不是一起黑客攻击。

Answer 1

嗯，我想这远远不像我想象的那么困难，但我想要的行为可以通过这样做来实现：

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

Answer 2

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

这种方式应该调整..

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

提供位置支持

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

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

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