shape-image-threshold - CSS（层叠样式表） 编辑

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

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

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

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

/* Global values */
shape-image-threshold: inherit;
shape-image-threshold: initial;
shape-image-threshold: unset;

初始值	0.0
适用元素	floats
是否是继承属性	否
计算值	The same as the specified value after clipping the number to the range [0.0, 1.0].
Animation type	a number

语法

值

<alpha-value>

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

正式语法

<alpha-value>
where 
<alpha-value> = <number> | <percentage>

范例

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

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

#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	Status	Comment
CSS Shapes Module Level 1 shape-image-threshold	Candidate Recommendation	Initial definition

浏览器兼容性

BCD tables only load in the browser

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

参见

• CSS Shapes
• Overview of CSS Shapes
• <basic-shape>
• shape-outside
• shape-margin