CSS - shape-image-threshold 属性

CSS shape-image-threshold 属性在使用 shape-outside 属性时，指定从图像中提取形状的 alpha 通道阈值。

可能的值

<alpha-value> − 设置形状提取的阈值。alpha 值大于阈值的像素定义形状。超出 0.0（完全透明）到 1.0（完全不透明）范围的值将限制在此范围内。

应用于

浮动元素。

DOM 语法

shape-image-threshold = <alpha-value>;

CSS shape-image-threshold - 无阈值

以下示例演示了 shape-image-threshold: 0 属性将 alpha 通道值设置为 0%（完全透明），并将其视为元素形状的一部分 −

<html>
<head>
<style>
   .box {
      width: 120px;
      height: 120px;
      float: left;
      background-image: linear-gradient(30deg, red, transparent 70%, transparent);
      shape-outside: linear-gradient(30deg, red, transparent 70%, transparent);
      shape-image-threshold: 0;
   }
</style>
</head>
<body>
   <div class="box"></div>
   Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.
</body>
</html>

CSS shape-image-threshold - 50% 阈值

以下示例演示了 shape-image-threshold: 0.5 属性表示任何 alpha 值超过 50%（不透明大于透明）的像素都被视为形状的一部分 −

<html>
<head>
<style>
   .box {
      width: 120px;
      height: 120px;
      float: left;
      background-image: linear-gradient(30deg, red, transparent 70%, transparent);
      shape-outside: linear-gradient(50deg, red, transparent 80%, transparent);
      shape-image-threshold: 0.5;
   }
</style>
</head>
<body>
   <div class="box"></div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.
</body>
</html>

CSS shape-image-threshold - 100% 阈值

以下示例演示了 shape-image-threshold: 1 属性将 alpha 通道值设置为 100%（完全不透明），并将其视为元素形状的一部分 −

<html>
<head>
<style>
   .box {
      width: 120px;
      height: 120px;
      float: left;
      background-image: linear-gradient(30deg, red, transparent 70%, transparent);
      shape-outside: linear-gradient(50deg, red, transparent 80%, transparent);
      shape-image-threshold: 1;
   }
</style>
</head>
<body>
   <div class="box"></div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.
</body>
</html>

打印页面