[精讚] [會員登入]
7180

[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

你可能感興趣的文章

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

讓radio box 或checkbox 好按 在行動裝置下,radio box及checkbox變得很難按得到

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

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

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

[CSS] 改變文字選擇的顏色(反選的顏色) 我們會用滑鼠選取一小段文字,可能是為了複製或是為了看他清楚點,這篇來改變他選擇時的背影色。

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

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

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

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

我有話要說


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

訪客留言

[無留言]

隨機好文

[Freebsd] 使用 ADSL 撥接上網 Freebsd上要使用 ADSL 撥接上網,該如何設定?

看懂DSUB DVI HDMI USB等各式影音接頭 看懂DSUB DVI HDMI等各式影音接頭

「許功蓋」的字以及源由 有玩過電腦一段時間的人,都聽過這個人(有一天我才發現7年級的竟然都不認識這個

維修海棉拖把頭 這類型的海棉拖把很好用,可是這近發現海棉頭越來越不耐用,也許是錯覺,以往都能用個三四個月,現在二個月就差不多掉下來。 這

[PHP]解決ksort新增的SORT_NATURAL|SORT_FLAG_CASE方法 php>=5.4中ksort函數多了SORT_NATURAL 和 SORT_FLAG_CASE 旗標,對舊版的PHP中要怎麼辦?