背景

背景样式

指定一个元素的背景样式有以下几种方式：

• 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;
}

透明度