CSS 樣式CSS background 背景樣式範例

CSS3 背景樣式

background-size 指定背景圖片大小

background-size: auto | length | percentage | cover | contain

指定背景圖片大小 lengthpercentage 可設定 2 數值,也可只設定 1 個數值。
當只設定一個數值,另一個數值(高)預設值為 auto 此時高度以背景圖原始寬高比例,自動縮放。

  • auto 為預設值,即背景圖片原始長寬。
  • length 指定圖片具體大小的數值,不允許負值。
  • percentage 以背景圖所在元素的百分比指定背景圖大小(不允許負值)。
  • cover 主要用於背景圖小於所在的容器,而背景圖又不適合使用 repeat,此時就可以採用 cover 的方式,使背景圖放大至容器的大小,但此方法容易使背景圖因放大而失真。
  • containcover 正好相反,主要用於背景圖大於所在容器,但卻需要將背景圖完整呈現,此時就可採用 contain 的方式,使背景圖縮小至容器的大小。
background:url(penguin.png) no-repeat center;
background-size: auto;
background-size: 300px 100px;
background-size: cover; /*以寬度縮放*/
background-size: contain; /*以高度縮放*/

CSS 背景樣式

background 使用縮寫語法

background:red no-repeat url("dotUi.png");
background:red no-repeat url("dotUi.png");background-position:60% -40%;
background:url(dotUi.png) repeat-x scroll 0 0 rgba(0,0,0,0.3); /*可省去圖片雙引號*/

background-position 位置語法 (x% y% 前面是水平位置、後面是垂直位置)

背景屬性元素的矩框之背景圖 background-position 沒有設定時,其背景圖的初始預設位置於元素矩框左上角。

  • percentage 百分比表示
  • 可用兩個百分比表示水平與垂直的起點。
    只用一個百分比表示水平位置,垂直位置由系統預設值是 50% (亦可用負值)。
  • length 長度值表示
  • 可用兩個長度值表示水平與垂直的起點。單位是圖元 0px 0px 或任何其他的 CSS 單位。
    可以混合使用 %length 值。
  • top, center, bottom 位置方向表示
  • 使用此方法背景圖只顯示於元素的矩框之內,其參數有 left, center, right … 及下列方式。

  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right

background-repeat 背景圖是否要重複

  • repeat
  • 背景圖在水平與垂直重複 (此為預設值)。
  • repeat-x
  • 背景圖只在水平重複。
  • repeat-y
  • 背景圖只在垂直重複。
  • no-repeat
  • 背景圖不重複,只排列一次。

background-attachment 背景圖固定或者隨著頁面的內容滾動

  • scroll
  • 背景圖像會隨著頁面其餘部分的滾動而移動 (此為預設值)。
  • fixed
  • 當頁面的其餘部分滾動時,背景圖像不會移動。
  • inherit
  • 繼承父元件所設之特徵。

SVG as Background Images

background-image:url("images/charts.svg");
background-size:300px 100px;
width:300px;
height:100px;

IE7/IE8 background 無法顯示

在不同版本瀏覽器中檢視、發現 background 沒有顯示出、查證許久才知道問題。no-repeat 前面需有空格才能正常顯示。

background: url("dotUi.png") no-repeat; /*前面需有空格*/
background: url("dotUi.png")no-repeat;

Modification in