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;
<alpha-value>
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.
| 初始值 |
0.0
|
|---|---|
| 适用于 | floats |
| 继承 | no |
| 计算值 |
The same as the specified value after clipping the
<number>
to the range [0.0, 1.0].
|
| 动画类型 | a number |
<alpha-value>where
<alpha-value> = <number> | <percentage>
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.
<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>
#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
特性。
The 20% opacity threshold for treating gradient pixels as part of the shape is then established using
shape-image-threshold
采用值
0.2
.
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Shapes Module Level 1
The definition of 'shape-image-threshold' in that specification. |
候选推荐 | 初始定义 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
shape-image-threshold
|
Chrome 完整支持 37 | Edge 完整支持 79 |
Firefox
完整支持
62
|
IE 不支持 No | Opera 完整支持 24 | Safari 完整支持 10.1 | WebView Android 完整支持 37 | Chrome Android 完整支持 37 |
Firefox Android
完整支持
62
|
Opera Android 完整支持 24 | Safari iOS 完整支持 10.3 | Samsung Internet Android 完整支持 3.0 |
| Support for percentage opacity values | Chrome 完整支持 78 | Edge 完整支持 79 | Firefox 完整支持 70 | IE 不支持 No | Opera 不支持 No | Safari 不支持 No | WebView Android 完整支持 78 | Chrome Android 完整支持 78 | Firefox Android 不支持 No | Opera Android 不支持 No | Safari iOS 不支持 No | Samsung Internet Android 完整支持 12.0 |
完整支持
不支持
用户必须明确启用此特征。
<basic-shape>
shape-image-threshold
shape-margin
shape-outside