淺談CSS3中新增的背景屬性&漸變函數（gradient）

本篇介紹關於背景（background）的新增屬性和漸層函數（gradient），看看提供了哪些新背景元素控制和多種漸變效果的實現。

背景Background

background 是多個背景屬性的簡寫，

backgrounf: [background-color] | [background-image] |
    [background-position][/background-size] | [background-repeat] |
    [background-attachment] | [background-clip] | [background-origin], ...;

注意： 如果有background-size 值，需要緊跟著background-position 並且用"/" 分開；

background-image

#background-image 屬性可以增加多張背景圖片，不同的背景圖像和圖像用逗號隔開，所有的圖片中顯示在最頂端的為第一張。設定多張 png 圖片，可以出多張背景圖疊加的效果。

background-image: url("../../media/examples/lizard.png"),
  url("../../media/examples/star.png");

建議： 使用背景圖片的時候，最好也設定背景顏色（background-color），作為背景圖片不支援時的planB 。

background-size

CSS3 以前，背景圖片大小由圖片的實際大小決定。在 CSS3 中，background-size 屬性可以指定背景圖像的大小，取值像素或百分比（相對於父元素的寬度和高度的百分比的大小）。

圖片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原始比例的同時縮放到元素的可用空間的尺寸：

• cover：保持影像的寬高比例，縮放背景圖片以完全覆蓋背景區，可能背景圖片部分看不見。
• contain：保持影像的寬高比例，縮放背景圖片以完全裝入背景區，可能背景區部分空白。
• 一個值：這個值指定圖片的寬度，圖片的高度隱式的為auto
• 兩個值：第一個值指定圖片的寬度，第二個值指定圖片的高度

background-origin

background-origin 規定了指定背景圖片background-image 屬性的原點位置的背景相對區域。

注意： 當使用 background-attachment 為 fixed 時，該屬性將被忽略不起作用。

• border-box背景圖片的擺放以border 區域為參考
• padding-box背景圖片的擺放以padding 區域為參考
• content-box背景圖片的擺放以content 區域為參考

background-clip

background-clip 背景剪裁屬性是指定背景（背景圖片或顏色）的繪製區域。

• border-box：背景區域延伸到邊框（但是在邊框下層）

  
  

• ##padding-box：背景區域延伸到內邊距

  
  

• content-box：背景區域延伸到內容區

  
  

• #text：背景被裁切成文字的前景色。需要加上前綴-webkit-background-clip: text;

  
  

漸進Gradient

• 
  

  ############### #CSS3 漸層（gradients）可以讓在兩個或多個指定的顏色之間顯示平穩的過渡。比較使用漸層圖片，gradients 可以減少下載的時間和寬頻的使用，並且在放大時看起來效果更好。 ######線形漸層######顏色值沿著一條隱式的直線逐漸過渡。由 ###linear-gradient()### 產生。 ######為了建立一個線性漸變，你必須至少定義兩個顏色節點。顏色節點即你想要呈現平穩過渡的顏色。同時，你也可以設定一個起點和一個方向（或一個角度）。 ###

  /* 渐变轴为45度，从蓝色渐变到红色 */
  linear-gradient(45deg, blue, red);
  
  /* 从右下到左上、从蓝色渐变到红色 */
  linear-gradient(to left top, blue, red);
  
  /* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
  linear-gradient(0deg, blue, green 40%, red);

  ######語法######

  linear-gradient([ <angle> | to <side-or-corner> ,]? <color-stop-list> )

  ################：以角度值指定漸層的方向（或角度）。角度順時針增加。 ################
• <side-or-corner>：描述渐变线的起始点位置。to top, to bottom, to left 和 to right 这些值会被转换成角度 0 度、180 度、270 度 和 90 度。其余值会被转换为一个以向顶部中央方向为起点顺时针旋转的角度。渐变线的结束点与其起点中心对称。
• <color-stop-list>：颜色变化列表。支持透明度（rgba(255,0,0,0.1)）。

径向渐变

radial-gradient() CSS 函数创建了一个图像，该图像的颜色值由一个中心点（原点）向外扩散并逐渐过渡到其他颜色值。

同样至少需要定义两种颜色节点，也可以指定渐变的中心（默认在中心点，center）、形状（默认椭圆形 ellipse）、大小（默认 farthest-corner，表示到最远的角落）

语法

radial-gradient(
  [shape size at position] ?
  <color-stop-list> [ , <color-stop-list> ]+
)

• shape：椭圆形（ellipse，默认）或圆形（circle）
• size：
  • closest-side， 渐变的边缘形状与容器距离渐变中心点最近的一边相切（圆形）或者至少与距离渐变中心点最近的垂直和水平边相切（椭圆）。
  • closest-corner， 渐变的边缘形状与容器距离渐变中心点最近的一个角相交。
  • farthest-side， 与 closest-side 相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边）。
  • farthest-corner， 渐变的边缘形状与容器距离渐变中心点最远的一个角相交。
• position：可以是具体的两个位置偏移值（10% 20%），也可以是关键字（left、right、top、bottom）

重复渐变

重复多次渐变图案直到足够填满指定元素。由 repeating-linear-gradient() 和 repeating-radial-gradient() 函数产生。

重复函数的参数同上，不同的是它会基于渐变长度（最后一个色标和第一个之间的距离）倍数重复。

.linear-repeat {  background: repeating-linear-gradient(
    to top left,
    lightpink,
    lightpink 5px,
    white 5px,
    white 10px
  );
}.radial-repeat {  background: repeating-radial-gradient(
    powderblue,
    powderblue 8px,
    white 8px,
    white 16px
  );
}

更多编程相关知识，请访问：编程入门！！

以上是淺談CSS3中新增的背景屬性&漸變函數（gradient）的詳細內容。更多資訊請關注PHP中文網其他相關文章！