[精讚] [會員登入]
7096

[CSS] 背景 background

css 中最常用的特性(property)之一就是 background ,這個有什麼好難的?事實上 backgroun

此文完整連結 http://n.sfs.tw/10700

複製連結 [CSS] 背景 background@新精讚
(文章歡迎轉載,務必尊重版權註明連結來源)
2019-10-25 06:28:30 最後編修
2017-01-27 10:48:48 By 張○○
 

自動目錄

css 中最常用的特性(property)之一就是 background ,這個有什麼好難的?事實上 background 到了css3後增加了不少特性,這些特性真的有很多細節,我整理此篇。

background 是一個很特別的特性,因為他有很多種的寫法,例如:

background: red;  /* 紅色背景 */
background: url(/path/to/your/pic.jpg);  /*使用圖片當背景 */
background: -moz-linear-gradient(top, rgba(47,158,226,1) 0%, rgba(221,241,255,0.48) 56%, rgba(221,241,255,0.07) 100%); /* FF3.6+ 產生漸層背景 */

一、基本寫法

1. 單色背景

  簡單的寫法,可以使用色名、色票或顏色函式[1]
  background: red;  /* 紅色背景 */
  background: #FF0000;  /* 紅色背景 */
  background: rgb(255,0,0);  /* 紅色背景 */
  background: rgba(255,0,0,1);  /* 紅色背景 */
  background: hsl(0,100%,100%);  /* 紅色背景 */
  background: hsla(0,100%,100%,1);  /* 紅色背景 */

  以上的background 可改用 background-color 指定:
  background-color: #14A080;  /* 青色背景 */

2. 用圖片當背景

  使用圖片當背景必須用到 url 這個函數,請注意圖檔路徑不要使用引號,無論是單或雙引號

  background: url(/path/to/your/pic.jpg);  /* 使用絕對位址,這指到網站的根目錄 */
  background: url(path/to/your/pic.jpg);  /* 使用相對位址,圖檔要放在css檔所在的相對位置 */
  background: url(http://example.com/path/to/your/pic.jpg);  /* 使用網址url */

3. 圖片加上顏色背景

  同時設定圖片和顏色當背景會怎樣?顯示顏色還是圖片?

當有圖片時,會顯示圖片,當沒有圖片時,顯示背景色。(X) 錯誤觀念
圖片和背景色會同時顯示,圖片一定在前,背景色在後,圖片找不到會顯示背景色。(X) 錯誤觀念
圖片和背景色會同時顯示,由css的順序決定圖片或背景色誰在前誰在後。(O)

此例圖片在前,背景色在後。如果圖片是有透明度的png,會同時顯示顏色和圖片,以前這樣子可以做出多重背景效果。
#example1 {
    background: yellow;
    background-image:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png);
}

此例圖片在後,背景色在前。黃色會完全擋住圖片,這樣的寫法圖片就沒意義存在,所以沒人這樣寫。
#example2 {
    background-image:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png);
    background: yellow;
}

4. 速記寫法(shorthand)

background有很多分屬性:

.header {
      background-color: #fff;
      background-image: url(image.gif);
      background-repeat: no-repeat;
      background-position: top left;;
    }

可以寫成速記方式,用一長串來表式,但是得照順序寫,有時漏一兩項還是能正確的顯示,只是我沒測過是不是每個瀏覽器都能正常:

.header {
      background: #fff url(image.gif) no-repeat top left;
 }
他的寫法順序是[2]
background: color image position/size repeat origin clip attachment initial|inherit;
 
上面紫色部分因為css3的部分屬性在舊的瀏覽器不支援(例ie8),所以有時會造成不正確的結果,如果不正確的話請分項寫。

範例:

background: #000 url(image.gif); top left / 50% 20% no-repeat border-box content-box;

5. 拆開來的寫法

background: #000 url(image.gif); top left / 50% 20% no-repeat border-box content-box;
上例拆開來的寫法:

background-color: #000;
background-image: url(image.gif);
background-position: top left;
background-size: 50% 20%;
background-repeat: no-repeat;
background-origin: border-box;
background-clip: content-box;

二、CSS3新增背景特性

css3 有新增三個特性 background-clip、background-origin、background-size,也擴充原本的background和background-image:

1. background-clip 背景包含範圍

就是顯示背景的地區,主要有三種值:

  • border-box - 從邊界的最外緣開始,包含全部的邊界,當不是實心的邊界時,這個值才會有效果。
  • padding-box - (預設)從邊界的內緣開始,不包含邊界,如果是實心的邊界時,這個值效果和border-box相同。
  • content-box - 顯示padding以內本文的部分,不包括padding的空白。

2. background-origin 背景圖片開始放置的位置

這個特性只會影響背景圖片,不會影響背景色,主要有三種值:

  • border-box - 從邊界的最外緣開始放置圖片。
  • padding-box - (預設)從邊界的內緣開始放置圖片,請注意,當background-clip設定成border-box,但是圖片也要設成border-box,否則左側和上側的框會出現空白。
  • content-box - 從padding以內本文的部分開始顯示背景圖片。

重點提示:

  • 這個特性要和background-clip配合使用,否則結果可能會超出你的預期。
  • 這個特性只影響背景圖片,不影響背景色。
  • background-clip是背景顯示範圍、background-origin是背景圖左上角的位置、

3. background-size 改變背景圖片顯示的範圍大小

以前背景圖大小不對時得先用繪圖軟體修改成當大小再上傳,但現在不必了。

這是一個很詭異的特性,因為他設定的並不是圖片的大小比例,而是背景圖片在容器顯示的大小,這個特性在行動裝置的設計上尤其方便。

  background-size:50%;  /*容器中只顯示50%的背景*/
  background-size:50% auto;  /* 有時同上 */
  background-size:80% 50%;  /*寬顯示80%,高顯示50%,如下圖例,為了符合要求,原背景圖都變形 */

 background-size:500px 200px;  /* 容器中寬顯示500px,高顯示200px的背景*/
 background-size:auto; /* 等比例縮放的概念,有點類似 contain。如果背景圖夠大,就原圖大小呈現(部分呈現) */
 background-size:cover; /*等比例縮放背景後容器全部都能顯示背景,不會讓圖片變形,所以有些部分會顯示不到,很方便,這和 100% 100%是不同的觀念,100%會縮放變形 */
 background-size:contain; /* 等比例縮放背景,但為了顯示全部背景圖片,所以只會縮放到一邊最大後停止,這會讓一部分沒有背景 */

參考資料

[1] http://www.w3schools.com/cssref/css_colors_legal.asp

[2] W3C css syntax


原文 2015-08-09 02:44:15

你可能感興趣的文章

關閉瀏覽器表單的自動完成autocomplete 什麼是自動完成?就是當我們在網頁的輸入文字欄位中打入文字時,瀏覽器會把曾輸入過歷史記錄中找出來讓我們選擇。

CSS 的 !important 意義 網頁的前端工程師非常頭痛的事,就是同時要處理 IE和 FF等不同的瀏覽器,更糟的是 IE 又分成了 6 7 8三種版本,

[HTLM5] html元件上的 data-* 屬性 html5 中元件中多了一個 data-*的屬性,這個屬性超級好用

[CSS] 背景 background css 中最常用的特性(property)之一就是 background ,這個有什麼好難的?事實上 backgroun

表格如何選取一欄(選取一直行) 表格中要指選擇一列很容易,直接叫用的標籤即可,但是要選取一欄呢?

[CSS] 將多張圖片合併,製作css spirte 網站中有很多的小圖,如果能把他們合併後再用CSS取用,就能大幅的提升網路效能。

UTF-8 BOM (Byte Order Mark) 的問題 在 Michael Kaplan 那看到 Every character has a story #4: U+feff

[CSS] HTML 畫出粗外框表格的方法 (粗框表格) 在畫表格的時候,習慣上表格的外框要比內部的線條來得粗,不但比較美觀,而且看起來比較完整

[HTML5] script 的新增屬性 defer, async script 的新增屬性 defer, async

[HTML] CSS中的折字換行或不換行(防止容器破壞) 使用者留言時故意來用一串長長的且沒有任何空白的長字串,把你的容器破壞得很難看...

我有話要說


限制:留言最高字數1000字,超過部分會被截掉。請注意:留言不可帶有網址,會被濾掉。 限制:未登入訪客,每則留言間隔需超過10分鐘,每日最多5則留言。

訪客留言

[無留言]

隨機好文

如何在linux下執行java 原生的java應用程式可以使用簡單的方法在console下面寫出來,適合作簡單的應用

PHP for sphinx 函式庫安裝 PECL/sphinx PHP>= 5.2.2 已經能原生支援 sphinx,可是預設的沒有裝,我們得自己裝才能用

設計的工作絕不接受比價 拿買陽春麵的價格想買牛肉麵,寧願倒掉也不賣

[大型機台] 熱血高校躲避球 多少少年時光歲月耗在這個遊戲上,二十幾年前的那個時光,唯一想做的事就是把吃飯錢省下來拿去打一場五塊錢的電動,就算是沒錢也

網頁的標頭(head)搜尋引擎和FB最佳化 網頁的標頭(head)搜尋引擎和facebook最佳化