Javascript 带封面的全屏背景，但聚焦于图像的一部分

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

一个很好的例子是，但是当你把窗口缩小时，它会聚焦在黄色标志上，而不是图像的中间

---

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

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

这样应该可以调整

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

提供位置支持

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

你需要考虑背景大小，尽管你会裁剪。

---

如果您不考虑将BG的大小限制到文档大小，您可以将其定位（提供的图像大于用户屏幕），然后溢出：隐藏以移除那些滚动条，但仍然不是最优雅的方式。 我想这远没有我想象的那么困难，但我想要的行为可以通过这样做来实现：

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

---

如果我想集中在80%，55%（x轴上100的80个，y轴上100的55个）上，那会怎样呢？你最好给这个属性添加一个缩放。。我会做一个小测试。啊，我想我刚刚找到了我自己的答案，背景：url（'IMG.PNG'）不重复80%50%；给了我想要的行为。是的background-position-x:-100px；背景位置y:80px；然而，除非你正在缩放，否则你最终会裁剪你的图像…如果你用像素来做的话，是的，但用百分比它工作得很完美。