1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
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
---
<div>{{CSSRef}}</div>
<p><span class="seoSummary"><a href="/en-US/docs/Web/CSS">CSS</a> 属性 <strong><code>shape-image-threshold</code></strong> 通过设定一个alpha通道的界限值来提取{{cssxref("shape-outside")}} 值为图像的形状。</span></p>
<div>{{EmbedInteractiveExample("pages/css/shape-image-threshold.html")}}</div>
<p>所有alpha值比这个界限值大的像素都会被当做形状的一部分，以此确定形状的边界。举个例子，界限值为<code>0.5</code>时，形状会包含所有不透明度超过50%的像素。</p>
<pre class="brush:css no-line-numbers">/* <number> value */
shape-image-threshold: 0.7;
/* Global values */
shape-image-threshold: inherit;
shape-image-threshold: initial;
shape-image-threshold: unset;
</pre>
<p>{{cssinfo}}</p>
<h2 id="语法">语法</h2>
<h3 id="值">值</h3>
<dl>
<dt>{{cssxref("<alpha-value>")}}</dt>
<dd>设定界限值以从图像中提取形状。形状由所有alpha值比界限值大的像素定义。在0.0（完全透明）到1.0（完全不透明）之外的值会被重置（译者：如，小于0.0的值会被重置成0.0）。</dd>
</dl>
<h3 id="正式语法">正式语法</h3>
{{csssyntax}}
<h2 id="范例">范例</h2>
<p>这个例子创建了一个{{HTMLElement("div")}}块，其背景是一个渐变图像。<code>shape-outside</code>也定义了一个渐变图像，以此创建一个CSS形状，渐变图像中不透明度至少为20%（即alpha值大于0.2）的像素都是形状的一部分。</p>
<h3 id="HTML">HTML</h3>
<pre class="brush: 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></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css; hightlight[9]">#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;
}</pre>
<p>在这里，形状由{{cssxref("background-image")}}创建，使用渐变而非图像文件。我们在{{cssxref("shape-outside")}}属性中使用相同的渐变图像创建形状，以此构建浮动区域。</p>
<p>随后值为<code>0.2</code>的<code>shape-image-threshold</code>属性规定渐变中不透明度超过20%的像素才参与构成形状。</p>
<h3 id="Result">Result</h3>
<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" height="230" id="frame_Example" src="https://mdn.mozillademos.org/en-US/docs/Web/CSS/shape-image-threshold$samples/Example?revision=1598826" width="600"></iframe></p>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS Shapes', '#shape-image-threshold-property', 'shape-image-threshold')}}</td>
<td>{{Spec2('CSS Shapes')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<div>
<p>{{Compat("css.properties.shape-image-threshold")}}</p>
</div>
<h2 id="参见">参见</h2>
<ul>
<li><a href="/en-US/docs/Web/CSS/CSS_Shapes">CSS Shapes</a></li>
<li><a href="/en-US/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes">Overview of CSS Shapes</a></li>
<li>{{cssxref("<basic-shape>")}}</li>
<li>{{cssxref("shape-outside")}}</li>
<li>{{cssxref("shape-margin")}}</li>
</ul>
|
