|
背景附著
background-attachment 屬性決定用戶滾動(dòng)頁面時(shí)圖片的狀態(tài)。三個(gè)可用屬性為 scroll(滾動(dòng))，fixed(固定) 和 inherit(繼承)。inherit 單純地指定元素繼承他的父元素的 background-attachment 屬性。
為了正確地理解 background-attachment，首先需要明白頁面(page)和視口(view port)是如何協(xié)作地。視口(view port)是瀏覽器顯示網(wǎng)頁的部分(就是去掉工具欄的瀏覽器)。視口(view port)的位置固定，不變動(dòng)。
當(dāng)向下滾動(dòng)網(wǎng)頁時(shí)，視口(view port)是不動(dòng)的，而頁面的內(nèi)容向上滾動(dòng)�？雌饋砻菜埔暱�(view port)向頁面下方滾動(dòng)了。如果設(shè)置 background-attachment: scroll，就設(shè)置了當(dāng)元素滾動(dòng)時(shí)，元素背景也必需隨著滾動(dòng)。簡而言之，背景是緊貼元素的。這是 background-attachment 默認(rèn)值。
用一個(gè)例子來更清楚地描述下：
background-image: url(test-image.jpg);
background-position: 0 0;
background-repeat: no-repeat;
background-attachment: scroll;
當(dāng)向下滾動(dòng)頁面時(shí)，背景向上滾動(dòng)直至消失。
但是當(dāng)設(shè)置 background-attachment 為 fixed 時(shí)，當(dāng)頁面向下滾動(dòng)時(shí)，背景要待在它原來的位置(相對(duì)于瀏覽器來說)。也就是不隨元素滾動(dòng)。
用另一個(gè)例子描述下：
background-image: url(test-image.jpg);
background-position: 0 100%;
background-repeat: no-repeat;
background-attachment: fixed;
頁面已經(jīng)向下滾動(dòng)了，但是圖像仍然保持可見。
需要重視的一點(diǎn)是背景圖只能出現(xiàn)在它父元素能達(dá)到的區(qū)域。即使圖片是相對(duì)于視口(view port)定位地，如果它的父元素不可見，圖片就會(huì)消失。參見下面的例子。此例中，圖片位于視口(view port)的左下方，但是只有元素內(nèi)的圖片部分是可見的。
background-image: url(test-image.jpg);
background-position: 0 100%;
background-repeat: no-repeat;
background-attachment: fixed;
因?yàn)閳D片開始在元素之外，一部分圖片被切除了。
出處：前端觀察
責(zé)任編輯：bluehearts
上一頁 CSS背景全攻略 [2] 下一頁 CSS背景全攻略 [4]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 
第 3 頁 CSS背景全攻略 [3]
