---
title: shape-image-threshold
slug: Web/CSS/shape-image-threshold
tags:
  - Boundaries
  - CSS
  - CSS Property
  - CSS Shapes
  - Float Area
  - Opacity
  - Property
  - Reference
  - Shape
  - 'recipe:css-property'
  - shape-image-threshold
translation_of: Web/CSS/shape-image-threshold
---
<div>{{CSSRef}}</div>

<p><span class="seoSummary"><strong><code>shape-image-threshold</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、 {{cssxref("shape-outside")}} の値に指定された画像を使用してシェイプを抽出するのに使用される、アルファチャネルのしきい値を設定します。</span></p>

<div>{{EmbedInteractiveExample("pages/css/shape-image-threshold.html")}}</div>

<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>

<p>アルファコンポーネントの値がしきい値よりも大きいピクセルはすべて、境界を特定するためのシェイプの一部とみなされます。例えば、 <code>0.5</code> の値は不透過度が50%よりも大きいピクセルをすべて含めた図形になるという意味です。</p>

<h2 id="Syntax" name="Syntax">構文</h2>

<pre class="brush:css no-line-numbers notranslate">/* &lt;number&gt; 値 */
shape-image-threshold: 0.7;

/* グローバル値 */
shape-image-threshold: inherit;
shape-image-threshold: initial;
shape-image-threshold: unset;
</pre>

<h3 id="Values" name="Values">値</h3>

<dl>
 <dt>{{cssxref("&lt;alpha-value&gt;")}}</dt>
 <dd>画像からシェイプを抽出するために使用されるしきい値を設定します。シェイプはアルファ値がしきい値より大きいピクセルによって定義されます。 0.0 (完全に透過) から 1.0 (完全に不透過) の範囲を外れた値は、この範囲に収められます。</dd>
</dl>

<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>

<p>{{cssinfo}}</p>

<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>

{{csssyntax}}

<h2 id="Examples" name="Examples">例</h2>

<h3 id="Aligning_text_to_a_gradient" name="Aligning_text_to_a_gradient">グラデーションへのテキストの配置</h3>

<p>この例では、グラデーションの背景画像を持つ {{HTMLElement("div")}} ブロックを作成します。グラデーションは <code>shape-outside</code> を使用して CSS シェイプとして確立されているので、グラデーションの中のピクセルのうち 20% よりも大きい不透過度 (つまり、アルファコンポーネントが 0.2 よりも大きいピクセル) はシェイプの一部とみなされます。</p>

<h4 id="HTML">HTML</h4>

<pre class="brush: html notranslate">&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>

<h4 id="CSS">CSS</h4>

<pre class="brush: css; hightlight[9] notranslate">#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>シェイプの部分として扱うグラデーション内のピクセルは20%の不透過度がしきい値なので、 <code>shape-image-threadhold</code> の値を <code>0.2</code> にして使用して作成しています。</p>

<h4 id="Result" name="Result">結果</h4>

<p>{{EmbedLiveSample('Aligning_text_to_a_gradient', 600, 230)}}</p>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS Shapes', '#shape-image-threshold-property', 'shape-image-threshold')}}</td>
   <td>{{Spec2('CSS Shapes')}}</td>
   <td>初回定義</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<div>
<p>{{Compat("css.properties.shape-image-threshold")}}</p>
</div>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li><a href="/ja/docs/Web/CSS/CSS_Shapes">CSS シェイプ</a></li>
 <li><a href="/ja/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes">CSS シェイプの概要</a></li>
 <li>{{cssxref("&lt;basic-shape&gt;")}}</li>
 <li>{{cssxref("shape-outside")}}</li>
 <li>{{cssxref("shape-margin")}}</li>
</ul>