最近在學習css3的一些新屬性，就把一些使用中遇到的方法和問題做一個小結。

background-color

背景顏色在IE7之前只顯示到padding區域，不包含border。而現代瀏覽器background-color都是從border的左上角，到border的右下角。

background-color: rgba(0,255,0,0.5);

background-image

背景圖圖有幾種情況：默認情況下（repeat），會從border區域開始布滿，當然也包含了border區域；

當設置為no-repeat時，是從padding的左上角到border的右下角；

背景圖圖應用：

logo中添加用于SEO的文字

html結構是：h1>a，a中的文字用于搜索，再講a轉塊，轉塊之后就可以設置寬高，這樣就可以看到后面加的背景圖圖了，寬高就等于背景圖圖的寬高，但是搜索的文字會覆蓋在背景圖上，使用text-indent給a一個-999px的值讓文字出去很遠很遠的位置，再給a一個overflow：hidden就可以把文字切掉了。當然，也可以將文字的font-size設為0，但是在IE6、7下會出現不兼容問題，有一小條文字在圖圖上，so用text-indent就好了。

padding區域擠出用來放背景圖

這種方法加圖圖，通常是這個圖圖并不重要，主要用于修飾的時候，重點在文字部分。

為什么要加在padding呢？當想放一張圖圖在盒子中，通常是在no-repeat情況下，那么no-repeat時圖圖可以到padding區域，但是width是用來寫文字的，so就只能加在了padding，具體加在top還是left看具體情況而定。

注意：要設置背景圖，那么盒子必須要有一個寬高，如果是行內那就先轉塊，如果是浮動的那就先清除浮動（清除浮動方法再另外總結）。

在CSS3中可以重復填寫url()實現多背景，既可以這樣寫

background-image: url(), url(); background-position: right bottom, left top;復制代碼

還可以寫成綜合樣式：

background: url() right bottom, url() left top; 復制代碼

新屬性： background-clip

可以控制背景圖圖和背景顏色的繪制范圍。

：content-box，此時color和image只出現在內容區域（width），不會擴展到padding，更加到不了border了；：padding-box，此時color和image只出現到padding區域，在padding以內繪制；：border-box，看名字就知道可以繪制到border了。 復制代碼

background-clip應用舉例：

在導航欄中，鼠標經過時不看到切換狀態的變化，同時在視覺上分隔每個li的鏈接，使用padding-box聲明，讓背景色只到padding，然后給border設置為transparent（為了顯示后面的其他實色）也可以設置顏色給border，這樣后面的頁面透過邊框可見。

.multi_drop_menu li a { display:block;border-right-style:solid;Background-clip:padding-box;Text-decoration:none;Color:#555;Background-color:#eee;Border-width:3px;Border-color:transparent; } 復制代碼

插播一個background-origin：屬性值和background-clip一樣有三個，分別表示背景圖的原點在content、padding和border區域。

background-position

默認情況下是left top；居左上對齊，此時如果是no-repeat圖圖就只在左上位置，如果是repeat那會以左上頂點為原點向各個方向重復展開；通過設置位置來居左、中、右對齊，center center是以中心為原點，如果no-repeat那么圖圖就居中，repeat就會以最中心的圖圖為原點向各個方向展開來。 特殊情況是當背景圖片的size大于盒子的邊界，還是可以設置對齊位置，但是此時image不論是否設置了no-repeat都會擴展到border下面。

• 應用在body或盒子的大背景，position：center top；

• banner通欄，width：100%； position：center top；

像素表示法：兩個屬性值都是用px為單位的數值表示。

• 第一個值：數值是幾，表示圖片的左上角距離border以內的左上角，水平位移多少距離。
• 第二個值：數值是幾，表示圖片的左上角距離border以內的左上角，垂直位移多少距離。

像素表示法的兩個屬性值區分正負，正負值表示移動的方向不同。

• 正數：圖片的左上角相對于盒子border以內的左上頂點，向右、向下移動。
• 負數：圖片的左上角相對于盒子border以內的左上頂點，向左、向上移動。

像素定為法可以應用在sprite圖圖找圖上，所以，怎么擺放精靈圖就是一件要提前算計好的了，如果盒子在頁面左邊，那在sprite里面放在右邊，這樣右邊寬一些也不會有其他圖圖出現，相反盒子在頁面右邊就放在sprite的左側。

還有一種百分比的表示方法，

• 0% 0%相當于left top；50% 50%相當于center center；
• 100% 100%相當于將圖圖右下角對齊到了border內側的右下角。一種簡單的計算方法就是找出100% 100%對應的像素值，其他值再按照百分比計算出像素值再去定位，100%=盒子width + paddind - 圖圖width

注意: 修改background屬性時，使用單一屬性層疊，若使用綜合屬性則其他屬性不變，只改變需要修改的，在使用綜合屬性時，要特別注意position后面兩個值得順序！

background-attachment ：

scroll fixed 復制代碼

設置背景圖是否隨著頁面滾動而滾走，默認scroll隨著盒子滾動跟著走，fixed不隨著滾，永遠固定在瀏覽器窗口的某個位置，注意在小盒子內部使用fixed定位之后，參考點將從border的內左上點，變成瀏覽器窗口的左上頂點，，此時上面框里面的背景圖相對于browser的左上頂點定位，頁面滾動他也不后跟著滾，如果第一個box滾上去出了頁面，那么圖圖也將被其他盒子擋住了，因為背景圖就是在盒子下層在背景色上層的。

新屬性：background-image 背景圖漸變

漸變分兩種，linear-gradient （線性漸變）和 radial-gradient （放射性漸變，從一點向四周發散）。

• background：linear-gradient（red，blue）； 背景顏色從紅色到藍色的漸變；
• background：linear-gradient（to right，red，blue）； 背景顏色從紅色到藍色的漸變；
• background：linear-gradient（-45deg，red，blue）； 背景顏色把起點從默認的中上設定到了左上。

比如淘寶搜索框的漸變色：

.search ul li.active a{background: linear-gradient(to right, #FF8F00, #FF5300);color: #fff;font-weight: bold;border-radius: 5px 5px 0 0;} 復制代碼

新屬性：background-size

背景尺寸是CSS3規定的屬性，用來控制背景圖圖的size：

• 50%：縮放圖圖，讓圖圖填充背景區的一半；
• 100px 50px; 把圖圖調整到固定的寬高；
• cover；拉大圖片，讓圖圖完全填滿背景區，保持寬高比；等價于background-size: 100% auto;
• contain；縮放圖圖，讓圖圖恰好適合背景區，保持寬高比。等價于background-size: auto 100%;

注意不要把圖圖拉的太大，會造成失真！

應用舉例：在精靈圖中想要放大或者縮小其中某一個圖

將容納背景圖的盒子的寬高相應的x2，同時，背景定位的位置值x2，背景size也同時x2，即可實現精靈圖中選中的圖放大兩倍效果。 如果只是直接應用backg-size只會改變背景圖也就是整張精靈圖的size。

轉載于:https://juejin.im/post/5a3c6888f265da433470181b

總結

以上是生活随笔為你收集整理的CSS属性总结之background的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。