蚂蚁动态卡片中filter样式的用法与函数参考-移动开发平台 mPaaS-阿里云

CSS 属性将模糊或颜色偏移等图形效果应用于元素。滤镜（filter）通常用于调整图像，背景和边框的渲染。

支持的函数

函数	含义	默认值	取值范围
grayscale()	图像灰度。值为 100% 表示完全转为灰度图像。	0	0%~100%
opacity()	图像的透明程度。	1	0%~100%
invert()	反转图像。值为 100% 表示完全反转。	0	0%~100%
sepia()	将图像转换为深褐色。值为 100% 表示完全为深褐色。	0	0%~100%
saturate()	图像饱和度。值为 0% 表示完全不饱和；值为 100% 表示图像无变化；其他值是效果的线性乘数；超过 100% 表示有更高的饱和度。	1	0%~﹢∞
contrast()	图像的对比度。值为 0% 表示图像会全黑；值为 100% 表示图像不变。值可以超过 100%，意味着会运用更低的对比。	1	0%~﹢∞
brightness()	将线性乘法器应用于图像，使其看起来或多或少地变得明亮。值为 0％表示将创建全黑图像；值为 100％表示会使输入保持不变；其他值是效果的线性乘数；如果值大于 100% 则表示提供更明亮的结果。	1	0%~﹢∞

不支持的函数

不支持复合函数，不支持 blur、drop-shadow、hue-rotate、url。

示例

<template>
  <div class="root">
    <text>normal</text>
    <image
      class="image-normal"
      src="https://pic49.photophoto.cn/20181202/0021033888940147_b.jpg"
    ></image>

    <text>grayscale:100%</text>
    <image
      class="image-gray"
      style="bg"
      src="https://pic49.photophoto.cn/20181202/0021033888940147_b.jpg"
    ></image>
  </div>
</template>
<script>
export default {
  data: {},
  methods: {},
};
</script>
<style>
.root {
  display: flex;
  align-items: center;
  justify-content: center;
}
.image-normal {
  flex-direction: column;
  flex-shrink: 0;
  align-content: auto;
  width: 350rpx;
  height: 350rpx;
}
.image-gray {
  flex-direction: column;
  flex-shrink: 0;
  align-content: auto;
  width: 350rpx;
  height: 350rpx;
  filter: grayscale(100%);
}
</style>

单击此处 detailImageFilter.zip 获取完整示例代码。