CSS3

プロパティ

shape-image-threshold

→●、mdn

浮動体を避ける区画（アルファー チャンネル）のしきい値。

shape-image-threshold は、利用する図形を画像から抽出するときに利用される アルファ チャンネルの閾値を定義する。例えば値 0.5 は、図形は 50% より不透明な画素すべてを封入することを意味する。

<alpha-value>

＝<number>
| <percentage>

<number> ○

画像から図形を抽出するときに利用する閾値を設定する。図形は、アルファ値がこの閾値より大きい画素で定義される。0.0（全透明）以上かつ 1.0（全不透明）以下に入らない閾値は、この範囲に切り詰められる。

<DIV style="border:1px solid black; width:150px; height:150px;
 font-size:15px;
">
 <DIV style="border:1px solid red; width:100px; height:100px;
  float:left;
  background:linear-gradient(45deg,#808,#fff);
  shape-outside:linear-gradient(45deg,#fff,transparent);
  shape-image-threshold:0.3;
 "></DIV>
 あああああああああああああああああああああああああああああ
</DIV>

<DIV style="border:1px solid black; width:150px; height:150px;
 font-size:15px;
">
 <IMG src="Com/Arfa.gif" style="border:1px solid red; width:100px; height:100px;
  float:left;
  shape-image-threshold:0.3;
 ">
 あああああああああああああああああああああああああああああ
</DIV>

画像の透過には対応していないようだ。

<percentage> ○

【この値もとり得るはずだが、言及されていない。割合として等価な <number> 値と同じ効果になるであろうが（算出値も <number> になると思われる）。】

<DIV style="border:1px solid black; width:150px; height:150px;
 font-size:15px;
">
 <DIV style="border:1px solid red; width:100px; height:100px;
  float:left;
  background:linear-gradient(45deg,#808,#fff);
  shape-outside:linear-gradient(45deg,#fff,transparent);
  shape-image-threshold:30%;
 "></DIV>
 あああああああああああああああああああああああああああああ
</DIV>

注記： このモジュールの将来レベルでは、画像のアルファデータの代わりに輝度データを利用する 切り替え機能を定義し得る。そうなった場合、shape-image-threshold による閾値は、［切り替え状態に応じて、アルファ、輝度どっちかを適用する］ように拡張されることになる。

関連

shape-outside、shape-margin。

テスト