日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢(xún)
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
設(shè)計(jì)師必須了解的幾個(gè)background屬性

本文將介紹幾個(gè)background屬性，這些屬性即有CSS2中的，也有部分是可能出現(xiàn)在未來(lái)的CSS3中。相信掌握了這些background屬性，對(duì)大家今后的開(kāi)發(fā)工作十分有幫助。

背景屬性——background是css中的核心屬性。你應(yīng)該對(duì)它有充分的了解。這篇文章詳細(xì)討論了background的所有相關(guān)屬性，甚至包括background-attachment，還為我們介紹了它在即將到來(lái)的CSS3中的樣子，還有那些新加入的背景屬性。

使用CSS2中的背景屬性

回顧

CSS2中有五個(gè)與背景相關(guān)的屬性。它們是：

background-color: 完全填充背景的顏色                    

background-image: 用作背景的圖片                           

background-position: 確定背景圖片的位置                 

background-repeat: 確定背景圖片是否重復(fù)鋪平            

background-attachment: 確定背景圖片是否隨頁(yè)面滾動(dòng)   

這些屬性能夠?qū)懺谝粋€(gè)簡(jiǎn)單的屬性中：background。必須指出background負(fù)責(zé)元素內(nèi)容部分的背景，包括padding和border，但不包括margin。在Firefox, Safari 和 Opera, 以及 IE8中是這樣處理的。不過(guò)在IE7 和萬(wàn)惡的IE6中就沒(méi)包括border，區(qū)別就像下面的圖片示例顯示的那樣 。

[[5861]]498)this.style.width=498;" border=0 goog_docs_charindex="639">  

在IE7 和 IE6中Background沒(méi)有包括border

基本屬性

Background color屬性

background-color用來(lái)描述設(shè)置填充背景的顏色。有多種方法來(lái)定義確定填充的顏色，下列方法都是等效的：

 
 
 
 
    
  
  
  
  
  1. background-color: blue;   
    2. 
  
  
  
  
  2. background-color: rgb(0, 0, 255);  
    3. 
  
  
  
  
  3. background-color: #0000ff; 
    4.

background-color 也能設(shè)置成transparent，這樣就能讓其下的元素顯示出來(lái)。

Background image屬性

background-image 讓你可以使用自己的圖片作為背景。它和background-color關(guān)系密切。一旦你的圖片不足以平鋪整個(gè)元素背景，空出的部分將顯示background-color設(shè)置的顏色。它的使用極其簡(jiǎn)單，不過(guò)要記得圖片與css文件的位置關(guān)系：

background-image: url(image.jpg);

如果圖片在文件夾內(nèi)，就寫(xiě)成這樣，均是用得相對(duì)路徑:

background-image: url(images/image.jpg);

Background repeat屬性

默認(rèn)情況下你的圖片會(huì)水平和垂直重復(fù)直至鋪滿(mǎn)整個(gè)元素。但有時(shí)你可能只想向一個(gè)方向重復(fù)。那么就這么設(shè)置： 

 
 
 
 
    
  
  
  
  
  1. background-repeat: repeat; /* 默認(rèn)值. 會(huì)在所有方向重復(fù)鋪展圖片 */   
    2. 
  
  
  
  
  2. background-repeat: no-repeat; /* 不重復(fù)。圖片只出現(xiàn)一張 */ 
    3. 
  
  
  
  
  3. background-repeat: repeat-x; /* 水平重復(fù)鋪展 */ 
    4. 
  
  
  
  
  4. background-repeat: repeat-y; /* 垂直重復(fù)鋪展 */ 
    5. 
  
  
  
  
  5. background-repeat: inherit; /* 使用父元素的background-repeat屬性值. */ 
    6.

Background position屬性

background-position屬性控制著背景圖片在元素中的位置。掌握的關(guān)鍵是background-position 是圖片的左上角定位。

下面是background-position屬性的演示。當(dāng)然我們把background-repeat 屬性設(shè)置為 no-repeat。

 
 
 
 
    
  
  
  
  
  1. /* Example 1: 默認(rèn). */   
    2. 
  
  
  
  
  2. background-position: 0 0; /* i.e. 元素的左上角. */ 
    3. 
  
  
  
  
  3.    
    4. 
  
  
  
  
  4. /* Example 2: 移向右邊. */ 
    5. 
  
  
  
  
  5. background-position: 75px 0;  
    6. 
  
  
  
  
  6.    
    7. 
  
  
  
  
  7. /* Example 3: 移向左邊. */ 
    8. 
  
  
  
  
  8. background-position: -75px 0;  
    9. 
  
  
  
  
  9.    
    10. 
  
  
  
  
  10. /* Example 4: 向下移動(dòng). */ 
    11. 
  
  
  
  
  11. background-position: 0 100px; 
    12.

[[5862]]498)this.style.width=498;" border=0 goog_docs_charindex="2037"> 

你可以隨意設(shè)置背景圖片的位置

background-position 屬性也可以以關(guān)鍵字，百分比等單位工作，并非一定要精確使用像素（px）。
關(guān)鍵字很常用，在水平方向有:
left
center
right

垂直方向有:

top
center
bottom

就像之前那樣使用它們:

background-position: top right; 

百分比的使用方法也一樣:

background-position: 100% 50%;
效果就是這樣： 
[[5863]]498)this.style.width=498;" border=0 goog_docs_charindex="2359"> 

笑臉圖片被設(shè)置到元素的右邊的中間

Background attachment屬性

background-attachment屬性定義用戶(hù)滾動(dòng)頁(yè)面時(shí)背景圖片會(huì)發(fā)生什么。它有三個(gè)可能值：scroll, fixed and inherit. Inherit 仍然是繼承其父元素的設(shè)定要充分理解background-attachment屬性。首先就得搞清用戶(hù)滾動(dòng)頁(yè)面時(shí)，web頁(yè)面發(fā)生了什么。如果你設(shè)置值為fixed，那么當(dāng)你向下滾動(dòng)頁(yè)面時(shí)，內(nèi)容向下滾動(dòng)了，而背景不會(huì)跟著滾動(dòng)。結(jié)果就好像內(nèi)容向上在滾動(dòng)。當(dāng)然，如果你設(shè)值為scroll，背景就會(huì)滾動(dòng)了。

下面我們看一個(gè)例子：

 
 
 
 
    
  
  
  
  
  1. background-image: url(test-image.jpg);    
    2. 
  
  
  
  
  2. background-position: 0 0;  
    3. 
  
  
  
  
  3. background-repeat: no-repeat;  
    4. 
  
  
  
  
  4. background-attachment: scroll; 
    5.

  

當(dāng)我們向下滾動(dòng)頁(yè)面時(shí),背景圖片向上滾動(dòng)直至消失.

再看一個(gè)fixed例子:

 
 
 
 
    
  
  
  
  
  1. background-image: url(test-image.jpg);   
    2. 
  
  
  
  
  2. background-position: 0 100%;  
    3. 
  
  
  
  
  3. background-repeat: no-repeat;  
    4. 
  
  
  
  
  4. background-attachment: fixed; 
    5.

  

向下滾動(dòng)頁(yè)面，背景圖片依然可見(jiàn).

值得注意的是背景圖片只能在其元素內(nèi)移動(dòng)，下面就是一個(gè)例子：

 
 
 
 
    
  
  
  
  
  1. background-image: url(test-image.jpg);   
    2. 
  
  
  
  
  2. background-position: 0 100%;  
    3. 
  
  
  
  
  3. background-repeat: no-repeat;  
    4. 
  
  
  
  
  4. background-attachment: fixed; 
    5.

   

部分圖片消失了，因?yàn)槌鲈剡吔缌?

簡(jiǎn)單的Background屬性

我們可以把這些屬性設(shè)定寫(xiě)在一個(gè)屬性?xún)?nèi). 它的格式如下:

 
 
 
 
    
  
  
  
  
  1. background:      
    2.

例如, 這些設(shè)定...

 
 
 
 
    
  
  
  
  
  1. background-color: transparent;   
    2. 
  
  
  
  
  2. background-image: url(image.jpg);  
    3. 
  
  
  
  
  3. background-position: 50% 0 ;  
    4. 
  
  
  
  
  4. background-attachment: scroll;  
    5. 
  
  
  
  
  5. background-repeat: repeat-y; 
    6.

... 可以寫(xiě)成:

 
 
 
 
    
  
  
  
  
  1. background: transparent url(image.jpg) 50% 0 scroll repeat-y; 
    2.

而且你無(wú)需設(shè)定每個(gè)值。如果你不寫(xiě)，就會(huì)使用默認(rèn)值。因此，上面的也可寫(xiě)成這樣： 

 
 
 
 
    
  
  
  
  
  1. background: url(image.jpg) 50% 0 repeat-y; 
    2.

背景的“非常規(guī)”應(yīng)用

背景屬性除了設(shè)置美化元素之外，也有其他廣泛的非常規(guī)用途。

Faux Columns

當(dāng)使用float屬性布局時(shí)，確保兩縱行長(zhǎng)度相等可比較困難。如果兩個(gè)元素大小不一，那背景圖片就亂了。Faux columns是個(gè)簡(jiǎn)單的解決方案，首先發(fā)表在 A List Apart。
簡(jiǎn)單的說(shuō)就是在它們的父元素中設(shè)置一個(gè)整體的背景圖片，圖片中縱行的位置與分開(kāi)的實(shí)際位置正好符合。

Text Replacement

web上字體的選擇余地很小。我們的常用方法是制作文字的圖片，不過(guò)只這么干就對(duì)搜索引擎不友好了。為此一個(gè)流行的方法是用背景屬性顯示文字的圖片，而把其上的文字隱藏起來(lái)。這樣既對(duì)搜索引擎和屏幕閱讀器友好，在瀏覽器里也能看到炫酷的字體。
例如，文字信息這樣寫(xiě):

 
 
 
 
    
  
  
  
  
  1. Blogroll 
    2.

如果文字圖片是200px寬，75px高, 那我們就用下面的css代碼表現(xiàn)整張圖片:

 
 
 
 
    
  
  
  
  
  1. h3.blogroll {   
    2. 
  
  
  
  
  2. width: 200px;  
    3. 
  
  
  
  
  3. height: 75px; /* 就能顯示整張圖片. */ 
    4. 
  
  
  
  
  4. background:url(blogroll-text.jpg) 0 0 no-repeat; /* 設(shè)定圖片*/ 
    5. 
  
  
  
  
  5. text-indent: -9999px; /* 向左移動(dòng)文字9999px以隱藏文字*/ 
    6. 
  
  
  
  
  6. } 
    7.

Easier Bullet Points

無(wú)序列表選項(xiàng)的默認(rèn)樣式也許不那么好看。那么我們就用背景圖片讓他們看起來(lái)更nicer：

 
 
 
 
    
  
  
  
  
  1. ul {   
    2. 
  
  
  
  
  2. list-style: none; /* 去除默認(rèn)樣式. */ 
    3. 
  
  
  
  
  3. }  
    4. 
  
  
  
  
  4.    
    5. 
  
  
  
  
  5. ul li {  
    6. 
  
  
  
  
  6. padding-left: 40px; /* 讓內(nèi)容靠?jī)?nèi)，為背景顯示留出空間. */ 
    7. 
  
  
  
  
  7. background: url(bulletpoint.jpg) 0 0 no-repeat;  
    8. 
  
  
  
  
  8. } 
    9.

CSS3中的背景屬性

CSS3中有不少關(guān)于背景屬性的變化。最明顯的就是加入了多背景圖片的支持，另外還有四個(gè)新屬性，以及對(duì)已有屬性的改動(dòng)。
多背景圖片

CSS3允許你為一個(gè)元素使用多于一張的背景圖片。代碼與CSS2中相同，你可以用逗號(hào)分隔開(kāi)幾張圖片。第一個(gè)聲明的圖片會(huì)出現(xiàn)在元素頂部，就像這樣：

 
 
 
 
    
  
  
  
  
  1. background-image: url(top-image.jpg), url(middle-image.jpg), url(bottom-image.jpg);  
    2.

新屬性1： Background Clip

這個(gè)屬性又讓我們回到了開(kāi)始的問(wèn)題，關(guān)于border與background屬性的問(wèn)題。

background-clip 屬性讓你能控制在哪顯示你的背景.可能的值有：

background-clip: border-box;

background 在 border 內(nèi)顯示，和現(xiàn)在的方式一樣。.

background-clip: padding-box;

backgrounds 在 padding內(nèi)顯示,而非border，跟IE6的處理方式相同。

background-clip: content-box;

backgrounds 只顯示在內(nèi)容內(nèi), 而非border 或 padding。

background-clip: no-clip;

默認(rèn)值，和border-box一樣。

新屬性2: Background Origin

這個(gè)屬性需要和background-position屬性一起使用。你可以改變background-position 的計(jì)算方式(就像 background-clip一樣).

background-origin: border-box;

background-position 從border開(kāi)始計(jì)算。

background-origin: padding-box;

background-position從padding開(kāi)始計(jì)算。

background-origin: content-box;

background-position從內(nèi)容開(kāi)始計(jì)算。

想看background-clip和background-origin屬性應(yīng)用的例子請(qǐng)看CSS3.info.

新屬性3: Background Size

background-size屬性用來(lái)重定義你的背景圖片大小。其可能值有：

background-size: contain;

縮小圖片以符合元素大小。

background-size: cover;

擴(kuò)展圖片以符合元素大小。

background-size: 100px 100px;

重定義大小。

background-size: 50% 100%;

用百分比重定義。

你可以看看例子：CSS 3 specifications

新屬性4: Background Break

CSS 3中, 元素能分拆成多個(gè)部分(例如inline元素span能占多個(gè)行)。background-break屬性控制背景圖像如何在多個(gè)部分展示。

可能值有:

Background-break: continuous;默認(rèn)值

Background-break: bounding-box;: 將兩部分之間的值加入考慮.。

Background-break: each-box;: 每個(gè)部分單獨(dú)考慮。

Background Color屬性的改變

CSS3中background-color屬性支持前景色與底色：background-color: green / blue;

就這個(gè)例子，默認(rèn)顏色是綠色，如果無(wú)法顯示，則用藍(lán)色。

Background Repeat屬性的改變

還記得CSS 2中圖片可能會(huì)因過(guò)界而部分消失嗎？ CSS 3 有兩個(gè)新可能值來(lái)解決這一問(wèn)題:

space: 設(shè)置重復(fù)圖片的間距。

round: 重復(fù)圖片自動(dòng)調(diào)整大小以正好填充元素。

background-repeat: space的例子：CSS 3 specifications。

Background Attachment屬性的改變

background-attachment有個(gè)新可能值: local.。它與可滾動(dòng)的元素相關(guān)(比如擁有屬性overflow: scroll;).。當(dāng)background-attachment值為scroll時(shí), 背景圖片不會(huì)隨內(nèi)容滾動(dòng)。現(xiàn)在

background-attachment:local，圖片可以隨內(nèi)容一起滾動(dòng).


分享題目：設(shè)計(jì)師必須了解的幾個(gè)background屬性
轉(zhuǎn)載注明：http://www.5511xx.com/article/djsjjhs.html