CSS - shape-image-threshold 属性_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>
	 	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>

<< CSS - scrollbar-gutter 属性 CSS - shape-margin 属性 >>