|
背景的簡(jiǎn)寫屬性
可以把背景的各個(gè)屬性合為一行，而不用每次都單獨(dú)把他們寫出來。格式如下：
background: <color> <image> <position> <attachment> <repeat>
例如，下面的聲明
background-color: transparent;
background-image: url(image.jpg);
background-position: 50% 0 ;
background-attachment: scroll;
background-repeat: repeat-y;
可以合為單獨(dú)一行：
background: transparent url(image.jpg) 50% 0 scroll repeat-y;
而且不需要指定每一個(gè)值。如果省略值地話，就使用屬性地默認(rèn)值。例如，上面那行和下面這個(gè)效果一樣：
background: url(image.jpg) 50% 0 repeat-y;
背景的一般用法
除了可以用來使元素更加優(yōu)雅這類顯然的用法之外，背景也可以用于其它的目的。
仿欄
當(dāng)使用 css 的 float 屬性來定位布局元素時(shí)，要確保兩欄或多欄有相同的長(zhǎng)度是比較困難的。如果長(zhǎng)度不同，其中一欄的背景會(huì)比另外的短，這會(huì)破壞整個(gè)設(shè)計(jì)。
仿欄是個(gè)非常簡(jiǎn)單的背景技巧，這個(gè)技巧最早發(fā)表在A List Apart 。思路很簡(jiǎn)單：不再給每列單獨(dú)設(shè)置背景，而是給各列的父元素設(shè)置一個(gè)背景圖。所有欄的設(shè)計(jì)都包含在這張圖片之中。
文本替換
在網(wǎng)頁上，對(duì)于字體的選擇是相當(dāng)有限的。可以使用 sIFR 之類的工具來定制字體，但是這需要用戶啟用 JavaScript 。一個(gè)適用于任意瀏覽器的簡(jiǎn)單方法是，用想用的字體來做一張文本圖片，并用這張圖片作為背景。這樣，文本依然出現(xiàn)在文檔標(biāo)記中以供搜索引擎檢索和屏幕瀏覽器識(shí)別，但是在瀏覽器中就會(huì)顯示首選的字體。
例如，HTML 標(biāo)記可能是這樣的：
<h3>Blogroll</h3>
假如有一個(gè) 200 乘 75 的圖片，上面有更好看的字體，就可以用如下方式來替換文本：
h3.blogroll {
width: 200px;
height: 75px; /* So that the element will show the whole image. */
background:url(blogroll-text.jpg) 0 0 no-repeat; /* Sets the background image */
text-indent: -9999px; /* Hides the regular text by moving it 9999 pixels to the left */
}
簡(jiǎn)單的圓點(diǎn)
無需列表中的圓點(diǎn)看起來很難看。不用再處理所有不同的 list-style 屬性，只需要簡(jiǎn)單地把他們隱藏并用背景圖代替就可以了。因?yàn)閳D片可以隨意選擇，這些圓點(diǎn)就可以看起來更漂亮。
下面，我們把一個(gè)無需列表改造成有圓滑圓點(diǎn)的：
ul {
list-style: none; /* Removes default bullets. */
}
ul li {
padding-left: 40px; /* Indents list items, leaving room for background image on the left. */
background: url(bulletpoint.jpg) 0 0 no-repeat;
}
出處：前端觀察
責(zé)任編輯：bluehearts
上一頁 CSS背景全攻略 [3] 下一頁 CSS背景全攻略 [5]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 
第 4 頁 CSS背景全攻略 [4]
