首頁 >web前端 >css教學 >必須掌握的CSS知識-background屬性

必須掌握的CSS知識-background屬性

零下一度
零下一度原創
2017-05-04 17:34:332156瀏覽

css允許使用純色作為背景,同樣也允許使用圖片作為背景。
關於背景的設定:

  • background-color

     background-color:red;

    —注意:background-color不能繼承,其預設值是transparent。 transparent 有「透明」之意。也就是說,如果一個元素沒有指定背景色,那麼背景就是透明的,這樣其祖先元素的背景才能可見。

  • background-image

    #
     background-image:url(lks.jpg);

    —注意:背景圖片也是無法繼承的,而且背景圖片無法設定大小。
    瀏覽器對圖片格式的支援情況:

    • gif 動畫256種顏色

    • jpg 顏色豐富,瀏覽器支援效果好

    • png w3c推薦的格式,但瀏覽器支援的不太好(IE6,IE7,不支援)。

  • background-repeat

    #
    background-repeat:repeat;        //默认 背景图像将在垂直方向和水平方向重复。
    background-repeat:repeat-x;      //背景图像将在水平方向重复。
    background-repeat:repeat-y;      //背景图像将在垂直方向重复。
    background-repeat:no-repeat;     //背景图像将仅显示一次。
  • ##background -attachment

    background-attachment:scroll;    //默认值。背景图像会随着页面其余部分的滚动而移动。
    background-attachment:fixed;     //当页面的其余部分滚动时,背景图像不会移动。

  • #background-position—注意:您需要把background-attachment 屬性設定為"fixed",才能保證該屬性在Firefox 和Opera 中正常運作。

    • background-position:top<a href="http://www.php.cn/wiki/904.html" target="_blank"> left;</a>第一個是指垂直方向上,第二個是指在水平方向上,中間空格隔開。
      垂直方向上可以設定:top、center、
      bottom水平方向上可以設定:left、 center 、
      right;如果您只規定了一個關鍵字,那麼第二個值將是"center"。

    • background-position:50% 50%;預設值:0% 0%。
      第一個值是水平位置,第二個值是垂直位置。
      左上角是 0% 0%。右下角是 100% 100%。
      如果您僅規定了一個值,另一個值將是 50%。

    • background-position:20px 30px;第一個值是水平位置,第二個值是垂直位置。
      左上角是 0 0。單位是像素 (0px 0px) 或任何其他的 CSS 單位。
      如果您僅規定了一個值,另一個值將是50%。

注意:

1、當我們為body設定border後,我們會發現border只是圈住了body裡面有內容的地方。但是為body設定背景色,則填滿整個螢幕。

2、使用圖像作為背景時,圖像他的定位是參照螢幕的
視覺區域,而不是被border框住的部分。 3、當我們想要一次設定背景時,我們順序是有考究的。

background:red url(xin.jpg) norepeat fixed center center;每個參數使用空格隔開,依序是顏色,圖片,重複,固定方式,位置。
事實上,我在瀏覽器中對他們的位置進行了各種顛倒後,發現IE6、IE7不是能很好的支援亂序後的設置,但是現代瀏覽器還是可以支援的。為了相容性的考慮,建議使用上面的順序。

必須掌握的CSS知識-background屬性

歡迎補充與指正☺

【相關推薦】

1. 

免費css線上影片教學

2. 

css線上手冊

3. 

php.cn獨孤九賤(2)-css影片教學#

以上是必須掌握的CSS知識-background屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn