shape-image-threshold

shape-image-threshold は CSS のプロパティで、 shape-outside の値に指定された画像を使用してシェイプを抽出するのに使用される、アルファチャネルのしきい値を設定します。

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

構文

/* <number> 値 */
shape-image-threshold: 0.7;

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

値

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

公式定義

初期値0.0
適用対象floats
継承なし
計算値The same as the specified value after clipping the number to the range [0.0, 1.0].
アニメーションの種類number

形式文法

<alpha-value>
where 
<alpha-value> = <number> | <percentage>

例

グラデーションへのテキストの配置

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

シェイプは画像ファイルではなく、線形グラデーションの background-image を使用して定義されています。同じグラデーションが、 shape-outside プロパティを使用して、浮動領域を設定するためにシェイプが取得される画像としても使用されます。

シェイプの部分として扱うグラデーション内のピクセルは20%の不透過度がしきい値なので、 shape-image-threadhold の値を 0.2 にして使用して作成しています。

結果

仕様書

仕様書 状態 備考
CSS Shapes Module Level 1
shape-image-threshold の定義		 勧告候補 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
shape-image-thresholdChrome 完全対応 37Edge 完全対応 79Firefox 完全対応 62
完全対応 62
未対応 61 — 62
無効
無効 From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 24Safari 完全対応 10.1WebView Android 完全対応 37Chrome Android 完全対応 37Firefox Android 完全対応 62
完全対応 62
未対応 61 — 62
無効
無効 From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 24Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 3.0
Support for percentage opacity valuesChrome 完全対応 78Edge 完全対応 79Firefox 完全対応 70IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 完全対応 78Chrome Android 完全対応 78Firefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 完全対応 12.0

凡例

完全対応  
完全対応
未対応  
未対応
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報