爲什麼背景圖像在「background-attachment：local」時偏移〜25％？

是否有人可以幫助我瞭解爲什麼這個CSS：爲什麼背景圖像在「background-attachment：local」時偏移〜25％？

<style type="text/css"> 
    html { 
     background: url(images/img.diary.1280.jpg) no-repeat center center local; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
    } 
    body { 
     font-family: 'alpha geometrique', fantasy, cursive, sans-serif; 
     background: none; 
    }...

會使背景圖片「動起來」，由〜25％，因此，只有底部〜畫面的75％顯示，相對於這個備用「背景：」行？

background: url(images/img.diary.1280.jpg) no-repeat center center fixed;

它顯示100％的圖片擬合在視口內（這是我的願望）？

我也嘗試過「滾動」，但它與「本地」具有相同的效果。我不想使用固定的原因是，當我滾動窗口時，元素（引導程序4）會滾動，但背景圖像不會使元素看起來像頂部滑動。 我更喜歡&圖片滾動到一起，這是我試圖實現的真正目標。

由於

來源

2016-04-09 rockhammer

它與background-size: cover和圖像的縱橫比的事情。封面將增加圖像的大小，直到它涵蓋了寬度和高度，所以如果圖像是縱向的並且窗口是橫向的，它將增加圖像的尺寸（保持方面），直到它與窗口一樣寬，使窗口更高比窗口，因爲你有它垂直居中頂部和底部將不可見。試試這個：

html { 
    background: url(images/img.diary.1280.jpg) no-repeat center center local; 
    -webkit-background-size: contain; 
    -moz-background-size: contain; 
    -o-background-size: contain; 
    background-size: contain; 
    }

蘊藏像最適合的，反而會增加（或減少）圖像的大小，將適合的窗口中的最大尺寸。

來源

2016-04-09 02:53:04

感謝您的建議，Arleigh。使用「包含」時，圖像不會伸展（如您指出的那樣）以填充視口。但是你確實指出了我的正確方向。我需要的是將'background-position：center center'改爲'background-position：center top'，同時保留'background-attachment：local'。現在我有兩種我想要的行爲。謝謝。 – rockhammer

榮譽Arleigh Hix爲我指出了正確的方向。

我需要的是將background-position: center center更改爲background-position: center top，同時保持background-attachment: local。現在我有兩種我想要的行爲。

來源

2016-04-09 09:44:30 rockhammer

榮譽是偉大的，但如果我幫你理解爲什麼這個CSS會使背景圖像「向上移動」，如你所問，請你接受我的答案，謝謝。 –

爲什麼背景圖像在「background-attachment：local」時偏移〜25％？

回答

相關問題