CSS | shape-image-threshold 属性

简介

shape-image-threshold 属性用于指定 SVG 或 图片的 alpha 通道的阈值，决定哪些区域应该被当作形状。

语法

shape-image-threshold: <number>;

• <number>：指定一个介于 0 到 1 之间的数字，表示 alpha 通道阈值。默认值为 0。

示例

img {
  shape-outside: circle();
  shape-image-threshold: 0.5;
}

上述 CSS 样式指定了一个圆形外形来包裹图像，并且只有当图像的 alpha 值大于 0.5 时，图像的区域才会被认为是在圆内部。

浏览器兼容性

该属性的兼容性相对较差，需要使用技术实验性特性开启此功能。

目前支持该属性的浏览器版本有：

• Chrome：78+
• Firefox：75+
• Safari：14.1+
• Edge：79+

注意事项

• shape-image-threshold 最多可以接受 4 个小数点。
• 低于 alpha 阈值的所有像素都将被视为透明，而高于阈值的像素会被视为不透明。
• 如果设置了一个小于 0 的数字或一个大于 1 的数字，则为无效值。
• 该属性仅适用于带有简析度多边形外形（通过 shape-outside 属性指定）的元素。