CSS shape-image-threshold Property
Example
#example {
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-threshold with a value of 0.2.
Meaning:
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.
| Default value: | 0.0 |
| Inherited: | No |
| Animatable: | No |
| Version: | CSS3 |
| JavaScript syntax: | |
Standard Syntax
shape-image-threshold: alphaValue|initial|inherit|revert|revert-layer|unset;Browser Support
Status
Property Values
The following table describes the values of this property:
| Value | Description |
|---|---|
| alphaValue | 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. |
| initial | Sets this property to its default value. |
| inherit | If specified, the associated element takes the computed value of its parent element animation-delay property. |
| revert | Reverts the cascaded value of the property from its current value to the value the property |
| revert-layer | Rollback styles to the ones specified in previous cascade layers. |
| unset | Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not. |
Default CSS Property Values
selectors {
shape-image-threshold: 0.0;
}