shape-image-threshold

shape-image-threshold CSS 属性设置用于使用图像作为 shape-outside 值提取形状的 alpha 通道阈值。

试一试

任何 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: revert;
shape-image-threshold: revert-layer;
shape-image-threshold: unset;

值

<alpha-value>

设置用于从图像提取形状的阈值。形状由 alpha 值大于阈值的像素定义。超出 0.0（完全透明）到 1.0（完全不透明）范围的值会被钳制到此范围。

正式定义

初始值0.0
应用于浮动
继承否
计算值在将 <number> 剪裁到 [0.0, 1.0] 范围后，与指定值相同。
动画类型一个 数字

正式语法

shape-image-threshold = 
  <opacity-value>  

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

示例

将文本与渐变对齐

此示例创建一个具有渐变背景图像的 <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 属性建立浮动区域。

然后，使用shape-image-threshold并将值设置为0.2，建立将渐变像素视为形状一部分的20%不透明度阈值。

结果

规范

规范
CSS Shapes 模块 Level 1
# shape-image-threshold 属性

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅