CSS屬性總結之background

ACodingIceBear發表於2017-12-22
CSS

最近在學習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。

相關文章