CSS - shape-image-threshold

トップ > CSSリファレンス > shape-image-threshold

概要

属性名 shape-image-threshold
<number> | <percentage>
初期値0
適用可能要素すべての要素
継承継承しない
サポート https://caniuse.com/mdn-css_properties_shape-image-threshold

説明

shape-outside でテキストの回り込みを行う際、テキストの表示位置を決めるための透明度を 0~1.0 の値または 0~100% のパーセンテージで指定します。

使用例

CSS
#img1 {
  height: 200px;
  width: 200px;
  float: left;
  background-image: linear-gradient(140deg, black, transparent 50%, transparent);
  shape-outside:    linear-gradient(140deg, black, transparent 50%, transparent);
  shape-image-threshold: 0.2;
}
HTML
<img id="img1" src="image/earth.png"> Earth is the third planet...
表示
Earth is the third planet from the Sun and the only place known in the universe where life has originated and found habitability. While Earth may not contain the largest volumes of water in the Solar System, only Earth sustains liquid surface water, extending over 70.8% of the planet with its ocean, making it an ocean world. The polar regions currently retain most of all other water with large sheets of ice covering ocean and land, dwarfing Earth's groundwater, lakes, rivers and atmospheric water. The other 29.2% of the Earth's surface is land, consisting of continents and islands, and is widely covered by vegetation. (by Wikipedia)

関連項目

shape-outside, shape-margin,

リンク


Copyright (C) 2023 杜甫々
初版:2023年5月14日、最終更新:2023年5月14日
http://www.tohoho-web.com/css/prop/shape-image-threshold.htm