shape-image-threshold

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

CSS 属性 shape-image-threshold 通过设定一个 alpha 通道的界限值来提取shape-outside 值为图像的形状。

尝试一下

所有 alpha 值比这个界限值大的像素都会被当做形状的一部分，以此确定形状的边界。举个例子，界限值为0.5时，形状会包含所有不透明度超过 50% 的像素。

css
/* <number> value */
shape-image-threshold: 0.7;

/* Global values */
shape-image-threshold: inherit;
shape-image-threshold: initial;
shape-image-threshold: unset;
初始值0.0
适用元素浮动元素
是否是继承属性否
计算值The same as the specified value after clipping the <number> to the range [0.0, 1.0].
动画类型a number

语法

值

<alpha-value>

设定界限值以从图像中提取形状。形状由所有 alpha 值比界限值大的像素定义。在 0.0（完全透明）到 1.0（完全不透明）之外的值会被重置（译者：如，小于 0.0 的值会被重置成 0.0）。

正式语法

shape-image-threshold = 
  <opacity-value>  

<opacity-value> = 
  <number>      |
  <percentage>

范例

Aligning text to a gradient

这个例子创建了一个<div>块，其背景是一个渐变图像。shape-outside也定义了一个渐变图像，以此创建一个 CSS 形状，渐变图像中不透明度至少为 20%（即 alpha 值大于 0.2）的像素都是形状的一部分。

HTML

html
<div id="gradient-shape"></div>

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel at commodi
  voluptates enim, distinctio officia. Saepe optio accusamus doloribus sint
  facilis itaque ab nulla, dolor molestiae assumenda cum sit placeat adipisci,
  libero quae nihil porro debitis laboriosam inventore animi impedit nostrum
  nesciunt quisquam expedita! Dolores consectetur iure atque a mollitia dicta
  repudiandae illum exercitationem aliquam repellendus ipsum porro modi, id nemo
  eligendi, architecto ratione quibusdam iusto nisi soluta? Totam inventore ea
  eum sed velit et eligendi suscipit accusamus iusto dolore, at provident eius
  alias maxime pariatur non deleniti ipsum sequi rem eveniet laboriosam magni
  expedita?
</p>

CSS

css
#gradient-shape {
  width: 150px;
  height: 150px;
  float: left;
  background-image: linear-gradient(30deg, black, transparent 80%, transparent);
  shape-outside: linear-gradient(30deg, black, transparent 80%, transparent);
  shape-image-threshold: 0.2;
}

在这里，形状由background-image创建，使用渐变而非图像文件。我们在shape-outside属性中使用相同的渐变图像创建形状，以此构建浮动区域。

随后值为0.2的shape-image-threshold属性规定渐变中不透明度超过 20% 的像素才参与构成形状。

Result

规范

Specification
CSS Shapes Module Level 1
# shape-image-threshold-property

浏览器兼容性

BCD tables only load in the browser

参见