CSS背景屬性匯總


background-color

說明:該屬性為元素設置背景色,填充區域包括內容區,內邊距,邊框。默認值transparent表示透明,屬性值可以是顏色名字(如red),可以是十六進制表示(如#ff0000),可以用RGB表示如(rgb(255, 0, 0)),可以是關鍵字inherit繼承父元素的背景色。

background-attachment

body {
  background-image: url('a.jpg');
  background-attachment: fixed;
}

說明:該屬性規定背景圖片是否隨着頁面滾動。默認值scroll表示背景圖會隨着頁面滾動,fixed表示不隨頁面的滾動而滾動,inherit表示繼承父元素的值。

background-image

body {
  background-image: url('a.jpg');
}

說明:定義元素的背景圖,背景圖的大小占據元素的內容區,內邊距和邊框。圖片默認從左上角開始,如果圖片太小就會自動在水平和垂直方向上平鋪,直到占據整個元素的區域。none是默認值,url指定圖像路徑,inherit繼承父元素的值。

background-position

說明:定義背景圖片的起始位置。屬性值可以是以下關鍵字:
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

關鍵字的第一個值表示背景圖在垂直方向上的位置,第二個值表示背景圖在水平方向上的位置,第二個值默認是center

屬性值可以用百分比表示,例如background-position: 50% 30%;第一個表示水平方向上的距離(圖片左上角距離左邊的距離),第二個肯定是垂直方向上的距離(圖片左上角距離頂部的距離),切記它和使用關鍵字所代表的意思是相反的。0% 0%相當於關鍵字top left, 50% 50%相當於center, 100% 100%相當於bottom right。百分比是依據圖像在容器中的空白距離划分的,值不僅可以為正值,當值為負數時圖片相當於向上和向左移動的距離。

屬性值當然也可是像素,例如background-position: 50px 30px;具體含義同百分比相同,只是采用了絕對距離。

我用下面這個圖片實現了一個精靈圖,它的主要原理就是背景圖片定位:


例5就是最終的效果

background-repeat

body {
  background-image: url('a.jpg');
  background-position: no-repeat;
}

說明:背景圖像的平鋪模式。repeat是默認值,即圖像會在水平和垂直方向上平鋪。repeat-x圖像只在水平方向上屏幕。repeat-y圖像只在垂直方向上平鋪。no-repeat圖像不進行平鋪,最常用的一個值。inherit繼承父元素的值。

background-clip

說明:規定背景繪制的區域。無論是背景色還是背景圖片上面已介紹過,背景區域包括內容區,內邊距,邊框;該屬性可以改變背景區域,默認值border-box表示背景區域包括內容區,內邊距和邊框。padding-box背景區包括內容區和內邊距。content-box背景區域只包括內容區域。

background-origin

說明:規定background-position屬性相對於什么位置定位。上面的background-position例子中可以看到,邊框是沒有背景圖的,這是因為background-origin的默認值是padding-box,即背景圖是相對於內邊距來定位的,border-box表示背景圖相對於邊框來定位,content-box背景圖相對於內容區來定位。

background-size

說明:規定背景圖片的大小。默認值auto表示自身大小。屬性值的單位可以是像素,例如background-size: 100px 100px,第一個值寬度,第二個是高度,當只設置一個值時,第二個值默認是auto,瀏覽器根據寬度自動計算出高度。單位可以是百分比,百分比是相對於父容器的寬高,第一個值設置寬度,第二個設置高度,當只有一個值時第二個值默認為auto。屬性值cover表示覆蓋整個容器的區域,圖片太小就會等比例拉伸,太大就會把多余部分裁減掉,這就導致圖像的某些部分可能無法顯示在容器中。contain表示圖像在容器內等比例縮放,直到寬度或者高度填滿容器為止,這個值還是挺常用的。

background

說明:這是一個簡寫屬性,它是以下屬性的簡寫:

background-color
background-image
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment

官方沒有強制要求屬性順序,但是我們通常按照上面的排序寫,例如:background: #ff0000 url('a.jpg' center / 20px no-repeat),使用簡寫是一個很好的習慣。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM