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>

列印頁面