CSS 属性

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>
  CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
</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>
      CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。 
</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>
      CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
</body>
</html>