[精讚] [會員登入]
7951

[CSS] 背景 background

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

分享此文連結 //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

END

你可能感興趣的文章

[HTLM5] 表單color、email、url、search、tel輸入類型 介紹HTML5好用的輸入類型:color、email、url,以及兩個形同雞肋的類型search、tel..

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

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

[HTLM5] 表單number和range輸入類型 介紹HTML5和數字有關的輸入類型number/range 等類型

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

textarea計算字數和行數 textarea可以大量的放入文字,但要如何計算字數和行數呢?

我有話要說

>>

限制:留言最高字數1000字。 限制:未登入訪客,每則留言間隔需超過10分鐘,每日最多5則留言。

訪客留言

[無留言]

隨機好文

[札記] 2016.7~12月札記 札記,只是札記

UTF8中文字/全形一覽 快速查詢urf-8的中文字,共計13246中文字(5401常用字+7652罕用字+日文或編號),292全形符號,27半形符號。

世紀帝國征服者新版本--被遺忘的帝國 世紀帝國征服者新版本--被遺忘的帝國 世紀二代的征服者是精典遊戲中的精典,aofe更好玩...

[AS3] 物件加上超連結的方法 物件加上超連結,可讓使用者點擊的方法

在Centos7 下安裝 Wildfly10 wildfly以前叫JBoss,2014.11.20改名叫Wildfly,起始版本是Wildfly8,現在已經出到Wil