shape-image-threshold

< css‎ | properties
Jump to: navigation, search

shape-image-threshold

This article is Ready to Use.


W3C Candidate Recommendation

Summary

Defines the alpha channel threshold used to extract a shape from an image. Can be thought of as a "minimum opacity" threshold; that is, a value of 0.5 means that the shape will enclose all the pixels that are more than 50% opaque.

Overview table

Initial value 0.0
Applies to Floats
Inherited No
Media visual
Computed value As specified, clamped to a 0.0-1.0 range
Animatable Yes
CSS Object Model Property
Percentages [[CSS percentages::Alpha channel of the image specified by shape-outside.]]

Syntax

  • shape-image-threshold: <number>


Values

<number>
A numeric value used to set the opacity threshold used for extracting a shape from an image. Any values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) will be clamped to this range.


Compatibility

Do you think this data can be improved? You can ask to add by opening an issue or make a pull request.

Desktop

FeaturesChromeFirefoxInternet ExplorerOperaSafari
Basic support
?
Yes
?
none
?
none
?
none
7.0
prefix

Mobile

FeaturesAndroidFirefox MobileIE PhoneOpera MobileSafari Mobile
Basic support
?
Yes
?
none
?
none
?
none
?
Unknown


Examples

View live exampleNote: Depends upon an image previously specified by shape-outside.

CSS

/*
Extract a shape from an image by enclosing all pixels greater than 25% opacity
*/
#myimg {
  shape-image-threshold: 0.25;
}

Usage

Currently implemented as an experimental feature in WebKit and Blink. This can be used with a -webkit- prefix in WebKit nightly builds and with a -webkit- prefix in Chrome Canary builds with experimental-webkit-features enabled: chrome://flags/#enable-experimental-webkit-features


Related specifications

Specification Status Related Changes
CSS Shapes Module Level 1 W3C Candidate Recommendation

See also

Other articles

shape-outside shape-margin