背景位置對齊大背景圖像底部到底部的小容器

我有一個大的背景圖片，我想在網站橫幅中的英雄元素中使用。背景位置對齊大背景圖像底部到底部的小容器

這張照片的底部是關鍵部分，所以我總是希望它顯示。 background-position會將較小的照片與較大元素的底部對齊，但是當背景照片比元素大時，它會使背景圖像的頂部與容器的頂部對齊。我想保持背景圖像的底部與容器的底部對齊。

舉例：here's a background image;我想確保底部（有些山）總是出現在this jsfiddle。

來源

2014-02-11 chadoh

從你的英雄課堂中移除background-attachment: fixed;。

來源

2014-02-11 08:04:21

嗯，**確實**使它正確對齊，但我真的很喜歡固定圖像。任何方式我都可以擁有？ •我對照片位置在固定時的計算方式感到困惑。爲什麼會這麼劇烈地改變它？ – chadoh

當背景附件固定時，它固定在視口中......這意味着您可以滾動所有您想要的內容，但圖像不移動。此外，其位置設置爲左下角，所以其左下角將保持固定在視口的左下角。一旦刪除，後臺附件將返回到默認狀態'滾動'而不是'固定'。在「滾動」模式下，它相對於其容器保持固定，在這種情況下，它是通過它查看的水平窗口。如果該窗口四處移動，則其中包含的背景圖像也會移動。 –

就雙方而言，您可以擁有多個背景圖片，並且可以通過定位，不透明度以及其他方式實現一些很酷的效果。在MDN上籤出此鏈接：https：//developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds –

背景位置對齊大背景圖像底部到底部的小容器

回答

相關問題