中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

背景平鋪(background-repeat)

設(shè)置背景圖片時(shí)，默認(rèn)把圖片在水平和垂直方向平鋪以鋪滿整個(gè)元素。這也許是你需要的，但是有時(shí)會希望圖片只出現(xiàn)一次，或者只在一個(gè)方向平鋪。以下為可能的設(shè)置值和結(jié)果：

background-repeat: repeat; /* 默認(rèn)值，在水平和垂直方向平鋪 */
background-repeat: no-repeat; /* 不平鋪。圖片只展示一次。 */
background-repeat: repeat-x; /* 水平方向平鋪(沿 x 軸) */
background-repeat: repeat-y; /* 垂直方向平鋪(沿 y 軸) */
background-repeat: inherit; /* 繼承父元素的 background-repeat 屬性*/

背景定位(background-position)

background-position 屬性用來控制背景圖片在元素中的位置。技巧是，實(shí)際上指定的是圖片左上角相對于元素左上角的位置。

下面的例子中，設(shè)置了一個(gè)背景圖片并且用 background-position 屬性來控制它的位置，同時(shí)也設(shè)置了 background-repeat 為 no-repeat。計(jì)量單位是像素。第一個(gè)數(shù)字表示 x 軸(水平)位置，第二個(gè)是 y 軸(垂直) 位置。

/* 例 1: 默認(rèn)值 */
background-position: 0 0; /* 元素的左上角 */
 
/* 例 2: 把圖片向右移動 */
background-position: 75px 0;
 
/* 例 3: 把圖片向左移動 */
background-position: -75px 0;
 
/* 例 4: 把圖片向下移動 */
background-position: 0 100px;

background-position 屬性可以用其它數(shù)值，關(guān)鍵詞和百分比來指定，這比較有用，尤其是在元素尺寸不是用像素設(shè)置時(shí)。

關(guān)鍵詞是不用解釋的。x 軸上：

• * left
• * center
• * right

y 軸上:

• * top
• * center
• * bottom

順序方面和使用像素值時(shí)的順序幾乎一樣，首先是 x 軸，其次是 y 軸，像這樣：

background-position: top right;

使用百分?jǐn)?shù)時(shí)也類似。需要主要的是，使用百分?jǐn)?shù)時(shí)，瀏覽器是以元素的百分比數(shù)值來設(shè)置圖片的位置的�？蠢�子就好理解了。假設(shè)設(shè)定如下：

background-position: 100% 50%;
This goes 100% of the way across the image (i.e. the very right-hand edge) and 100% of the way across the element (remember, the starting point is always the top-left corner), and the two line up there. It then goes 50% of the way down the image and 50% of the way down the element to line up there. The result is that the image is aligned to the right of the element and exactly half-way down it.

糖伴西紅柿：這一段沒想到合適的翻譯，保留原文，意譯。前端觀察 版權(quán)所有，轉(zhuǎn)載請保留鏈接。

update: 感謝 天涯 的指教，這段搞明白了。使用百分?jǐn)?shù)定位時(shí)，其實(shí)是將背景圖片的百分比指定的位置和元素的百分比位置對齊。也就是說，百分?jǐn)?shù)定位是改變了背景圖和元素的對齊基點(diǎn)。不再像使用像素和關(guān)鍵詞定位時(shí)，使用背景圖和元素的左上角為對齊基點(diǎn)。例如上例的 background-position: 100% 50%; 就是將背景圖片的 100%(right) 50%(center) 這個(gè)點(diǎn)，和元素的 100%(right) 50%(center) 這個(gè)點(diǎn)對齊。

這再一次說明了，我們一直認(rèn)為已經(jīng)掌握的簡單的東西，其實(shí)還有我們有限的認(rèn)知之外的知識。

最終的效果是笑臉圖片被定位在元素的最右邊，離元素頂部是元素的一半，效果和 background-position: right center; 一樣。

出處：前端觀察
責(zé)任編輯：bluehearts

上一頁 CSS背景全攻略 [1] 下一頁 CSS背景全攻略 [3]

◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。