CSS背景background、background-position使用詳解

《CSS背景background、background-position使用詳解》由會員上傳分享，免費在線閱讀，更多相關內(nèi)容在教育資源-天天文庫。

1、CSS背景background、background-position使用詳解這篇文章主要介紹了CSS背景background、background-position使用方法,需要的朋友可以參考下背景(background)是css中一個重要的的部分，也是需要知道的css的基礎知識之一。這篇文章將會涉及css背景(background)的基本用法，包括諸如background-attachment等的屬性，也會介紹一些有關背景(background)的常用技巧，以及css3中的背景(background)(包含4個新的背景(background)屬性)。css2中的背景(backgro

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

3、era以及IE8中工作正常，但是IE6和IE7中，background沒把border計算在內(nèi)。基本屬性背景色(background-color)background-color屬性用純色來填充背景。有許多方式指定這個顏色，以下方式都得到相同的結(jié)果。CSSCode復制內(nèi)容到剪貼板1.background-color:blue;2.background-color:rgb(0,0,255);3.background-color:#0000ff;background-color也可被設置為透明（transparent），這會使得其下的元素可見。背景圖(background-image)ba

4、ckground-image屬性允許指定一個圖片展示在背景中?？梢院蚥ackground-color連用，因此如果圖片不重復地話，圖片覆蓋不到地地方都會被背景色填充。代碼很簡單，只需要記住，路徑是相對于樣式表的，因此以下的代碼中，圖片和樣式表是在同一個目錄中的。background-image:url(image.jpg);但是如果圖片在一個名為images的子目錄中，就應該是：background-image:url(images/image.jpg);糖伴西紅柿：使用../表示上一級目錄，比如background-image:url(../images/image.jpg);表示圖

5、片位于樣式表的上級目錄中的images子目錄中。有點繞，不過這個大家應該都知道了，我就不詳說了。背景平鋪(background-repeat)設置背景圖片時，默認把圖片在水平和垂直方向平鋪以鋪滿整個元素。這也許是你需要的，但是有時會希望圖片只出現(xiàn)一次，或者只在一個方向平鋪。以下為可能的設置值和結(jié)果：CSSCode復制內(nèi)容到剪貼板1.background-repeat:repeat;/*默認值，在水平和垂直方向平鋪*/2.background-repeat:no-repeat;/*不平鋪。圖片只展示一次。*/3.background-repeat:repeat-x;/*水平方向平鋪(沿x

6、軸)*/4.background-repeat:repeat-y;/*垂直方向平鋪(沿y軸)*/5.background-repeat:inherit;/*繼承父元素的background-repeat屬性*/【重點】背景定位(background-position)background-position屬性用來控制背景圖片在元素中的位置。技巧是，實際上指定的是圖片左上角相對于元素左上角的位置。下面的例子中，設置了一個背景圖片并且用background-position屬性來控制它的位置，同時也設置了background-repeat為no-repeat。計量單位是像素。第一個數(shù)字表示

7、x軸(水平)位置，第二個是y軸(垂直)位置。CSSCode復制內(nèi)容到剪貼板1./*例1:默認值*/2.background-position:00;/*元素的左上角*/3.4./*例2:把圖片向右移動*/5.background-position:75px0;1.2./*例3:把圖片向左移動*/3.background-position:-75px0;4.5./*例4:把圖片向下移動*/6.background-position:0100px;