shape-image-threshold

The shape-image-threshold CSS property defines the alpha channel threshold used to extract the shape using an image.

Syntax

CSS

shape-image-threshold: value;

JS

object.style.shapeImageThreshold = "value";

Values

<'shape-image-threshold'> = <alpha-value>

<alpha-value> = <number> | <percentage>

<number>

An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

Initial

Examples

number

percentage

JS

<!doctype html>
<html>
<head>
    <style>
        .myclass {
            background-image: linear-gradient(45deg, yellow, transparent);
            float: left;
            height: 100px;
            shape-outside: linear-gradient(45deg, yellow, transparent);
            width: 100px;
        }
    </style>
    <script>
        function mouseover(value) {
            document.getElementsByClassName("myclass")[0].style.shapeImageThreshold = value;
        }
    </script>
</head>
<body>
    <input onmouseover="mouseover(value)" type="button" value="initial">
    <button onmouseover="mouseover(value)" value="0.5">number</button>
    <button onmouseover="mouseover(value)" value="50%">percentage</button><br>
    <div class="myclass"></div>
    <div>shape-image-threshold shape-image-threshold shape-image-threshold shape-image-threshold shape-image-threshold shape-image-threshold shape-image-threshold shape-image-threshold shape-image-threshold shape-image-threshold shape-image-threshold shape-image-threshold shape-image-threshold shape-image-threshold shape-image-threshold shape-image-threshold shape-image-threshold shape-image-threshold shape-image-threshold shape-image-threshold shape-image-threshold shape-image-threshold shape-image-threshold shape-image-threshold shape-image-threshold shape-image-threshold shape-image-threshold shape-image-threshold shape-image-threshold shape-image-threshold shape-image-threshold shape-image-threshold</div>
</body>
</html>