Mobile Platform as a Service：背景

背景樣式

指定一個元素的背景樣式有以下幾種方式：

• background-color，定義元素的背景顏色。

  屬性	實值型別	預設值	寫法
  background-color	色彩單位	transparent	background-color:red;

• background-image，定義元素的背景映像。

  屬性	實值型別	預設值	可選值	寫法	備忘
  background-image	string	無	url("https:/xxx")CDN 地址；url("./xxx")離線包相對位址；url("data:")base64 編碼； linear-gradient(s1,s2,…,slast),第一段（漸層角度設定，取值為具體對角度值以 deg 結尾，或者為方向描述，包括 top、to top、right、to right、bottom、to bottom、left、to left），第二段（漸層起始顏色設定，色彩單位；如果有百分比值，必須為 0%），中間段（漸層過程顏色設定，色彩單位；支援設定百分比值，必須為線性遞增方式，不提供百分比時，顏色佔比情況將被均分），最後一段（漸層終止顏色設定，色彩單位；如果有百分比值，必須為 100%）； none：清除背景；	background-image: linear-gradient(45deg, red 0%, #333 50%, rgb(255,0, 255) 80%, green 100%);	無
  				background-image: linear-gradient(to top,red, #333, rgb(255, 0, 255), green);
  				background-image: url("https://gw-office.alipayobjects.com/basement_prod/e047f6c8-dc14-481f-a22c-8dd9012b01a3.png");
  background-size	string 或長度單位	auto	單描述值（cover，contain，auto）； ${x}px ${y}px 雙精確值長度單位+百分比； ${x}px 單值長度單位+百分比；	background-size:contain;	精確值或百分比只單值時，另外一個值預設 auto。
  				background-size:100px 200px;
  background-position	string	0	單描述值（top，right，bottom，left，center）； 雙描述值（bottom right）； ${x}px 單值長度單位/${y}px 單值長度單位+單描述值； ${x}px 單值長度單位+百分比；${y}px 單值長度單位+百分比	background-position:top;	單值時，另一個值預設置中。
  				background-position:bottom right;
  				background-position:30px left;
  				background-position:100px;
  				background-position:50px 50px;
  background-repeat	string	repeat	repeat-x, repeat-y, no-repeat, repeat	單值：background-repeat: repeat-x;	無
  				雙值：background-repeat: repeat no-repeat; 其中 x 軸描述包含（no-repeat、repeat）y 軸描述包含（no-repeat、repeat）	無

• background 簡寫方式：

  • background-color 和 background-image 相關樣式可合并簡寫，無關先後順序；

  • background-image 相關樣式可合并簡寫，例如 background-image 和 background-repeat；

  • 支援使用none清除背景；

樣本

background:url('https://img.alicdn.com/tfs/TB1uCUdfND1gK0jSZFyXXciOVXa-151-164.png') repeat-x;
background:url('https://img.alicdn.com/tfs/TB1uCUdfND1gK0jSZFyXXciOVXa-151-164.png') #f0f no-repeat;
background:url('https://img.alicdn.com/tfs/TB1uCUdfND1gK0jSZFyXXciOVXa-151-164.png') #00f repeat-x bottom;
background:#ff0 url('https://img.alicdn.com/tfs/TB1uCUdfND1gK0jSZFyXXciOVXa-151-164.png') repeat-y right;

背景的基本用法樣本

div
{
	background-image:url('img_tree.png');
	background-repeat:repeat;
}

陰影

用於設定元素的陰影。

陰影的基本使用樣本

div
{
	width:300px;
	height:100px;
	background-color:yellow;
	box-shadow: 10px 10px 5px #888888;
}

透明度