文档

背景

更新时间:

蚂蚁动态卡片提供了几种背景元素控制属性。

背景样式

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

  • 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;
}
image.png
重要
  • 同时设置背景图和渐变色时的优先级关系:渐变色(background-repeat)) > 背景图(background-image);

  • 【v-alipay-10.2.0】渐变背景支持多种写法,如:background: linear-gradient(#FF6010, 50%, #FFD2B3, #FFF2E9, #FFFFFF);

阴影

用于设置元素的阴影。

属性

值类型

默认值

可选值

写法

备注

box-shadow

长度单位&色彩单位

支持格式${x}${y}${size}${color},x,y,size 满足长度单位,color 满足色彩单位。

box-shadow: 10px 20px 10px red;

四个值必需

重要
  • 目前蚂蚁动态卡片内置组件在 iOS/Android 平台均支持该样式;

  • 每个元素只支持设置一个阴影效果,不支持多个阴影同时作用于一个元素。

阴影的基本使用示例

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

透明度

属性

值类型

默认值

可选值

写法

opacity

float

1

0-1 的浮点数

opacity:0.5;