From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../zh-cn/web/css/shape-image-threshold/index.html | 123 +++++++++++++++++++++ 1 file changed, 123 insertions(+) create mode 100644 files/zh-cn/web/css/shape-image-threshold/index.html (limited to 'files/zh-cn/web/css/shape-image-threshold/index.html') diff --git a/files/zh-cn/web/css/shape-image-threshold/index.html b/files/zh-cn/web/css/shape-image-threshold/index.html new file mode 100644 index 0000000000..135715233f --- /dev/null +++ b/files/zh-cn/web/css/shape-image-threshold/index.html @@ -0,0 +1,123 @@ +--- +title: shape-image-threshold +slug: Web/CSS/shape-image-threshold +tags: + - CSS + - CSS Shapes + - Float Area + - Opacity + - Reference + - shape-image-threshold +translation_of: Web/CSS/shape-image-threshold +--- +
{{CSSRef}}
+ +

CSS 属性 shape-image-threshold 通过设定一个alpha通道的界限值来提取{{cssxref("shape-outside")}} 值为图像的形状。

+ +
{{EmbedInteractiveExample("pages/css/shape-image-threshold.html")}}
+ + + +

所有alpha值比这个界限值大的像素都会被当做形状的一部分，以此确定形状的边界。举个例子，界限值为0.5时，形状会包含所有不透明度超过50%的像素。

+ +
/* <number> value */
+shape-image-threshold: 0.7;
+
+/* Global values */
+shape-image-threshold: inherit;
+shape-image-threshold: initial;
+shape-image-threshold: unset;
+
+ +

{{cssinfo}}

+ +

语法

+ +

值

+ +
+
{{cssxref("<alpha-value>")}}
+
设定界限值以从图像中提取形状。形状由所有alpha值比界限值大的像素定义。在0.0（完全透明）到1.0（完全不透明）之外的值会被重置（译者：如，小于0.0的值会被重置成0.0）。
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

范例

+ +

这个例子创建了一个{{HTMLElement("div")}}块，其背景是一个渐变图像。shape-outside也定义了一个渐变图像，以此创建一个CSS形状，渐变图像中不透明度至少为20%（即alpha值大于0.2）的像素都是形状的一部分。

+ +

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

+ +
#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;
+}
+ +

在这里，形状由{{cssxref("background-image")}}创建，使用渐变而非图像文件。我们在{{cssxref("shape-outside")}}属性中使用相同的渐变图像创建形状，以此构建浮动区域。

+ +

随后值为0.2的shape-image-threshold属性规定渐变中不透明度超过20%的像素才参与构成形状。

+ +

Result

+ +

+

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS Shapes', '#shape-image-threshold-property', 'shape-image-threshold')}}{{Spec2('CSS Shapes')}}Initial definition
+ +

浏览器兼容性

+ +
+ + +

{{Compat("css.properties.shape-image-threshold")}}

+
+ +

参见

+ + -- cgit v1.2.3-54-g00ecf