形状图像阈值

CSS shape-image-threshold 属性设置当使用 shape-outside 来定义 CSS 元素的浮动区域时，图像形状中包含哪些像素。

假设我们使用线性渐变来定义 CSS 形状的浮动区域。 例如，从实色到透明色，以 45° 角渐变

通常，我们会将其定义为元素的 background-image。 如果我们让此元素浮动并在其旁边放置一些内容，渐变和内容将并排显示。

但是，如果我们将 background-image 替换为 shape-outside，我们将不再看到渐变，而是内容将在渐变中像素透明的地方绕过它。

但是，假设我们认为文本需要更紧密地围绕形状。 这时我们可以使用 shape-image-threshold。 我们可以使用它通过包含半透明的像素来调整内容自然绕过透明像素的位置。 例如，shape-image-threshold 值为 .3 将在形状的浮动区域中包含不透明度大于 30% 的像素。

这次，我们将包含渐变，以查看它的工作原理。

看到吗？ 通过在第二个形状上声明 shape-image-threshold 并将其设置为 .15 的值，我们已将不透明度大于 15% 的像素包含在浮动区域中，从而允许内容稍微与形状重叠。

这在我们使用实际图像文件（使用透明度）定义外部形状时也有效。 一样的原理，只是使用不同的形状。

语法

.logo {
  shape-outside: url(/path/to/image.png);
  shape-image-threshold: .6;
}

• 应用于：浮动
• 继承：否
• 初始值 0.0
• 动画类型：数字

值

shape-image-threshold 属性接受一个介于 0 和 1 之间的单个 alpha 值，其中 0 等效于 0% 的不透明度级别（完全透明），而 1 等效于 100% 的不透明度级别（无透明度）。 初始值为 0.0。

浏览器支持

IE	边缘	火狐	铬	Safari	歌剧
不	79+	62+	37+	10.1+	24+

安卓 Chrome	安卓火狐	安卓浏览器	iOS Safari	歌剧迷你
84+	68+	81+	10.3+	全部

更多信息

• CSS 形状模块级别 1 规范（编辑草案）
• MDN 文档

相关