Detailed explanation of the use of filter properties in CSS

The filter attribute defines the visual effect of an element

blur

Apply a Gaussian blur to the image. The "radius" value sets the standard deviation of the Gaussian function, or how many pixels on the screen are blended together, so larger values result in more blur.
If no value is set, the default is 0; this parameter can set the CSS length value, but does not accept percentage values.

brightness

Applies a linear multiplication to the image, making it appear lighter or darker. If the value is 0%, the image will be completely black. A value of 100% results in no change to the image. Other values correspond to a linear multiplier effect. Values over 100% are possible, and the image will be brighter than before. If no value is set, the default is 1.

contras

tAdjust the contrast of the image. A value of 0% will make the image completely black. At a value of 100%, the image remains unchanged. Values can exceed 100%, meaning a lower contrast will be used. If no value is set, the default is 1.

graycale

Convert the image to grayscale. The value defines the scale of the conversion. A value of 100% converts the image completely to grayscale, and a value of 0% leaves the image unchanged. Values between 0% and 100% are linear multipliers of the effect. If not set, the value defaults to 0;

hue-rotate

Applies a hue rotation to the image. The "angle" value sets the color wheel angle to which the image will be adjusted. If the value is 0deg, the image will not change. If the value is not set, the default value is 0deg. Although there is no maximum value for this value, a value exceeding 360 degrees is equivalent to going around again.

inver

tInvert the input image. The value defines the scale of the conversion. A value of 100% is a complete reversal. A value of 0% results in no change to the image. Values between 0% and 100% are linear multipliers of the effect. If the value is not set, it defaults to 0.

opacity

Converts the transparency of the image. The value defines the scale of the conversion. A value of 0% is completely transparent, and a value of 100% leaves the image unchanged. Values between 0% and 100% are linear multipliers of the effect, which is equivalent to multiplying the image samples by the amount. If the value is not set, it defaults to 1. This function is very similar to the existing opacity property, except that some browsers provide hardware acceleration through filters to improve performance.

saturate

Convert image saturation. The value defines the scale of the conversion. A value of 0% results in complete desaturation, while a value of 100% results in no change to the image. For other values, they are linear multipliers of the effect. Values over 100% are allowed, giving higher saturation. If the value is not set, it defaults to 1.

sepia

Converts the image to sepia. The value defines the scale of the conversion. A value of 100% results in a completely sepia color, and a value of 0% results in no change to the image. Values between 0% and 100% are linear multipliers of the effect. If not set, the value defaults to 0;

drop-shadow

Set a shadow effect to the image. Shadows are composited underneath the image, can be blurred, and are offset versions of a mask that can be painted in a specific color. The function accepts values of type <shadow> (defined in CSS3 background), except that the "inset" keyword is not allowed. This function is very similar to the existing box-shadow property; the difference is that through the filter, some browsers will provide hardware acceleration for better performance.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    body {
        background-color: #000;
        color: skyblue;
    }
    div {
        border: 1px solid #fff;
        padding: 10px;
        width: 610px;
        margin: 10px;
    }
    .blur1 {
        filter: blur(0.4px);
    }

    .blur2 {
        filter: blur(1px);
    }

    .blur3 {
        filter: blur(4px);
    }

    .brightness1 {
        filter: brightness(0.30);
    }

    .brightness2 {
        filter: brightness(0.8);
    }

    .brightness3 {
        filter: brightness(1);
    }

    .contrast1 {
        filter:contrast(10%);
    }

    .contrast2 {
        filter:contrast(50%);
    }

    .contrast3 {
        filter:contrast(100%);
    }

    .grayscale1 {
        filter: grayscale(10%);
    }

    .grayscale2 {
        filter: grayscale(50%);
    }

    .grayscale3 {
        filter: grayscale(100%);
    }

    .huerotate1 {
        filter: hue-rotate(0deg);
    }

    .huerotate2 {
        filter: hue-rotate(90deg);
    }

    .huerotate3 {
        filter: hue-rotate(180deg);
    }

    .invert1 {
        filter: invert(20%);
    }

    .invert2 {
        filter: invert(60%);
    }

    .invert3 {
        filter: invert(100%);
    }

    .opacity1 {
        filter: opacity(10%);
    }

    .opacity2 {
        filter: opacity(80%);
    }

    .opacity3 {
        filter: opacity(100%);
    }

    .saturate1 {
        filter: saturate(0.2);
    }

    .saturate2 {
        filter: saturate(0.6);
    }

    .saturate3 {
        filter: saturate(1);
    }

    .sepia1 {
        filter: sepia(10%);
    }

    .sepia2 {
        filter: sepia(60%);
    }

    .sepia3 {
        filter: sepia(100%);
    }

    .shadow1 {
        filter: drop-shadow(2px 2px 2px red);
    }

    .shadow2 {
        filter: drop-shadow(8px 8px 1px purple);
    }

    .shadow3 {
        filter: drop-shadow(1px 1px 10px hotpink);
    }
</style>

<body>
    <div class="filter1">
        <p>Draw Gaussian blur on the image. The larger the value, the blurrier it is.</p>
        <ul>
            <li class="blur1">blur</li>
            <li class="blur2">blur</li>
            <li class="blur3">blur</li>
        </ul>
    </div>
    <div class="filter2">
        <p>Applies a linear multiplication to the image to make it appear lighter or darker. A value of 0 makes the image completely black; a value greater than 100% makes the image brighter</p>
        <ul>
            <li class="brightness1">brightness</li>
            <li class="brightness2">brightness</li>
            <li class="brightness3">brightness</li>
        </ul>
    </div>
    <div class="filter3">
        <p>Adjust image contrast. A value of 0 makes the image completely black; values over 100% use even lower contrast</p>
        <ul>
            <li class="contrast1">contrast</li>
            <li class="contrast2">contrast</li>
            <li class="contrast3">contrast</li>
        </ul>
    </div>
    <!-- <div class="filter4">
        <p>blur</p>
        <ul>
            <li class="blur1">blur</li>
            <li class="blur2">blur</li>
            <li class="blur3">blur</li>
        </ul>
    </div> -->
    <div class="filter5">
        <p>The image is converted to grayscale. A value of 0 means no change to the image. A value of 100% means it is completely converted to grayscale.</p>
        <ul>
            <li class="grayscale1">grayscale</li>
            <li class="grayscale2">grayscale</li>
            <li class="grayscale3">grayscale</li>
        </ul>
    </div>
    <div class="filter6">
        <p>Applies hue rotation to the image. When the value is 0deg, the image does not change; there is no maximum value, and exceeding 360deg is equivalent to going around again</p>
        <ul>
            <li class="huerotate1">huerotate</li>
            <li class="huerotate2">huerotate</li>
            <li class="huerotate3">huerotate</li>
        </ul>
    </div>
    <div class="filter7">
        <p>Invert the input image. 0% means no change to the image, 100% means the image is completely reversed</p>
        <ul>
            <li class="invert1">invert</li>
            <li class="invert2">invert</li>
            <li class="invert3">invert</li>
        </ul>
    </div>
    <div class="filter8">
        <p>Inverts the transparency of an image. 0%, completely transparent; 100% no image change</p>
        <ul>
            <li class="opacity1">opacity</li>
            <li class="opacity2">opacity</li>
            <li class="opacity3">opacity</li>
        </ul>
    </div>
    <div class="filter9">
        <p>Converts image saturation. 0% completely unsaturated; 100%, completely saturated</p>
        <ul>
            <li class="saturate1">saturate</li>
            <li class="saturate2">saturate</li>
            <li class="saturate3">saturate</li>
        </ul>
    </div>
    <div class="filter10">
        <p>The image is converted to sepia. A value of 100% is dark brown; a value of 0% is no change to the image</p>
        <ul>
            <li class="sepia1">sepia</li>
            <li class="sepia2">sepia</li>
            <li class="sepia3">sepia</li>
        </ul>
    </div>
    <div class="filter11">
        <p>Image settings shadow effect</p>
        <ul>
            <li class="shadow1">shadow</li>
            <li class="shadow2">shadow</li>
            <li class="shadow3">shadow</li>
        </ul>
    </div>
</body>

</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: MySQL high concurrency method to generate unique order number

>>: Echarts sample code for using multiple X-axes to achieve seven-day weather forecast