---
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">/* &lt;number&gt; 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("&lt;alpha-value&gt;")}}</dt>
 <dd>设定界限值以从图像中提取形状。形状由所有alpha值比界限值大的像素定义。在0.0（完全透明）到1.0（完全不透明）之外的值会被重置（译者：如，小于0.0的值会被重置成0.0）。</dd>
</dl>

<h3 id="正式语法">正式语法</h3>

<pre class="syntaxbox">{{csssyntax}}</pre>

<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">&lt;div id="gradient-shape"&gt;&lt;/div&gt;

&lt;p&gt;
  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?
&lt;/p&gt;</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("&lt;basic-shape&gt;")}}</li>
 <li>{{cssxref("shape-outside")}}</li>
 <li>{{cssxref("shape-margin")}}</li>
</ul>