我们的志愿者还没有将这篇文章翻译为 中文 (简体)加入我们帮助完成翻译
您也可以阅读此文章的English (US)版。

The shape-image-threshold CSS property sets the alpha channel threshold used to extract the shape using an image as the value for shape-outside.

Any pixels whose alpha component's value is greater than the threshold are considered to be part of the shape for the purposes of determining its boundaries. For example, a value of 0.5 means that the shape will enclose all the pixels that are more than 50% opaque.

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

/* Global values */
shape-image-threshold: inherit;
shape-image-threshold: initial;
shape-image-threshold: unset;

Initial value0.0
Applies tofloats
Inheritedno
Mediavisual
Computed valueThe same as the specified value after clipping the <number> to the range [0.0, 1.0].
Animation typea number
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

Values

<number>
Sets the threshold used for extracting a shape from an image. The shape is defined by the pixels whose alpha value is greater than the threshold. Values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) are clamped to this range.

Formal syntax

<number>

Example

This example creates a <div> block with a gradient background image. The gradient is established as a CSS shape using shape-outside, so that pixels within the gradient which are at least 20% opaque (that is, those pixels with an alpha component greater than 0.2) are considered part of the shape.

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;
}

The shape is established here using background-image with a linear gradient rather than an image file. The same gradient is also used as the image from which the shape is derived for establishing the float area, using the shape-outside property.

The 20% opacity threshold for treating gradient pixels as part of the shape is then established using shape-image-threadhold with a value of 0.2.

Result

Specifications

Specification Status Comment
CSS Shapes Module Level 1
The definition of 'shape-image-threshold' in that specification.
Candidate Recommendation Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 37Edge ? Firefox Full support 62
Full support 62
No support 61 — 62
Disabled
Disabled 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 No support NoOpera Full support 24Safari Full support 10.1WebView Android Full support 37Chrome Android Full support 37Edge Mobile ? Firefox Android Full support 62
Full support 62
No support 61 — 62
Disabled
Disabled 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 Full support 24Safari iOS Full support 10.3Samsung Internet Android Full support 4.0

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
User must explicitly enable this feature.
User must explicitly enable this feature.

See also

文档标签和贡献者

最后编辑者: ddbeck,