技術(shù)文章css背景background攻略大全imglink

《技術(shù)文章css背景background攻略大全imglink》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫(kù)。

1、技術(shù)文章-CSS背景background攻略大全【img+link】（轉(zhuǎn)載）背景(background)是css中一個(gè)重要的的部分，也是需要知道的css的基礎(chǔ)知識(shí)之一。這篇文章將會(huì)涉及css背景(background)的基本用法，包括諸如??background-attachment等的屬性，也會(huì)介紹一些有關(guān)背景(background)的常用技巧，以及css3中的??背景(background)(包含4個(gè)新的背景(background)屬性)。css2中的背景(background)概述CSS2中有5個(gè)主要的背景(backgr

2、ound)屬性，它們是：*background-color:指定填充背景的顏色。*background-image:引用圖片作為背景。*background-position:指定元素背景圖片的位置。*background-repeat:決定是否重復(fù)背景圖片。*background-attachment:決定背景圖是否隨頁(yè)面滾動(dòng)。這些屬性可以全部合并為一個(gè)縮寫(xiě)屬性:background。需要注意的一個(gè)要點(diǎn)是背景占據(jù)元素的所有內(nèi)容區(qū)域，包括padding和??border，但是不包括元素的margin。它在Firefox,Saf

3、ari,Opera以及IE8中工作正常，但是IE6和IE7??中，background沒(méi)把border計(jì)算在內(nèi)。基本屬性背景色(background-color)background-color屬性用純色來(lái)填充背景。有許多方式指定這個(gè)顏色，以下方式都得到相同的結(jié)果。??????復(fù)制內(nèi)容到剪貼板程序代碼background-color:blue;??background-color:rgb(0,0,255);??background-color:#0000ff;??background-color也可被設(shè)置為透明（transpa

4、rent），這會(huì)使得其下的元素可見(jiàn)。背景圖(background-image)background-image屬性允許指定一個(gè)圖片展示在背景中?？梢院蚥ackground-color??連用，因此如果圖片不重復(fù)地話，圖片覆蓋不到地地方都會(huì)被背景色填充。代碼很簡(jiǎn)單，只需要記住，路徑是相對(duì)于樣式表的，因此以下的代碼中，圖片和樣式表是在同一個(gè)目錄中的。??????復(fù)制內(nèi)容到剪貼板程序代碼background-image:url(image.jpg);??但是如果圖片在一個(gè)名為images的子目錄中，就應(yīng)該是：??????復(fù)制內(nèi)容到剪

5、貼板程序代碼background-image:url(images/image.jpg);??糖伴西紅柿：使用../表示上一級(jí)目錄，比如background-image:url(../images/image.jpg);??表示圖片位于樣式表的上級(jí)目錄中的images子目錄中。有點(diǎn)繞，不過(guò)這個(gè)大家應(yīng)該都知道了，我就不詳說(shuō)了。前端觀察版權(quán)所有，轉(zhuǎn)載請(qǐng)保留鏈接。背景平鋪(background-repeat)設(shè)置背景圖片時(shí)，默認(rèn)把圖片在水平和垂直方向平鋪以鋪滿整個(gè)元素。這也許是你需要的，但是有時(shí)會(huì)希望圖片只出現(xiàn)一次，或者只在一個(gè)方向

6、平鋪。以下為可能的設(shè)置值和結(jié)果：??????復(fù)制內(nèi)容到剪貼板程序代碼background-repeat:repeat;/*默認(rèn)值，在水平和垂直方向平鋪*/??background-repeat:no-repeat;/*不平鋪。圖片只展示一次。*/??background-repeat:repeat-x;/*水平方向平鋪(沿x軸)*/??background-repeat:repeat-y;/*垂直方向平鋪(沿y軸)*/??background-repeat:inherit;/*繼承父元素的background-repeat屬性

7、*/??背景定位(background-position)background-position??屬性用來(lái)控制背景圖片在元素中的位置。技巧是，實(shí)際上指定的是圖片左上角相對(duì)于元素左上角的位置。??下面的例子中，設(shè)置了一個(gè)背景圖片并且用??background-position屬性來(lái)控制它的位置，同時(shí)也設(shè)置了background-repeat為??no-repeat。計(jì)量單位是像素。第一個(gè)數(shù)字表示x軸(水平)位置，第二個(gè)是y軸(垂直)位置。??????復(fù)制內(nèi)容到剪貼板程序代碼/*例1:默認(rèn)值*/??background-posi

8、tion:00;/*元素的左上角*/????/*例2:把圖片向右移動(dòng)*/??background-position:75px0;????/*例3:把圖片向左移動(dòng)*/??background-position:-75px0;????/*例4:把圖片向下移動(dòng)*/??backgro