[精讚] [會員登入]
6707

[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

你可能感興趣的文章

[HTML] 讓表格整欄上色的方法 過去我們要讓表格整欄上色,都得用很不方便的方法:該儲存格設定一個類別,指定他的樣式,現在有更好的方法

如何讓瀏覽器每次都重新載入css、js、圖檔 不管怎麼刷新網頁,他總是跑出來舊的內容,這對開發的人來說很困擾...

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

CSS 垂直中文字 要把文字垂直顯示的處理中文字正轉或逆轉90度的css設定

[CSS] 多個 class 的表示法和寫法 網頁設計中常會用到CSS,他的一般格式是這樣的:

[HTLM5] 表單時間日期date/time輸入類型 介紹HTML5和時間有關的輸入類型date/datetime/datetime-local/month/time/week

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

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

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

[CSS] placeholder 屬性的CSS怎麼設定? 常會用到的placeholder可以在沒填值時有提示的文字,想要改變格式該怎麼做?

我有話要說


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

訪客留言

[無留言]

隨機好文

Linux shell 的date表示法 linux下SHELL中的date表示法

[Win7] 燒錄 iso 檔 在Windows7 中內建燒錄程式,可以直接把檔案拉到光碟機裡,再執行燒錄。

維修冰箱 維修冰箱

魔球中小女孩唱的歌 The show 魔球中小女孩唱的歌 The show

[PHP] 檢查IP是否在某個網段內 mtachcidr 要檢查IP是否在某個網段內,要寫幾行?10行?5行? 不用,只要2行。以下是我寫的 code /** * matchCI