全屏幕背景與封面，但專注於圖像的一部分

Question

我希望div有一個覆蓋整個div的背景圖像但是當瀏覽器窗口大小改變時不會縮小太多而是聚焦到圖像上的某個點。

一個很好的例子就是這樣 ，但是當你使窗口尺寸變小時，它會聚焦在黃色標志上，而不是圖像的中間。

這種東西有插件或教程嗎？ 我敢肯定，使用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的大小到文檔大小，您可以定位它（提供圖像大於用戶屏幕）然后溢出：隱藏以刪除那些滾動條但仍然不是最優雅的方式。