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

Summary of using the exclamation mark command (!) in Linux

Detailed explanation of the use of filter properties in CSS

Summary of using the exclamation mark command (!) in Linux

Analysis of how to create a stored procedure in MySQL to add new fields to a data table

Three commonly used MySQL data types

Nodejs implements intranet penetration service

Implementation process of nginx high availability cluster

How to install Maven automatically in Linux continuous integration

Vue uses OSS to upload pictures or attachments

Some conclusions on developing mobile websites

Basic operations of MySQL data tables: table structure operations, field operation example analysis

How to use CSS custom variables in Vue

Recommend

MySQL 5.7.16 installation and configuration method graphic tutorial (Ubuntu 16.04)

Table related arrangement and Javascript operation table, tr, td

CSS box hide/show and then the top layer implementation code

CocosCreator learning modular script

select the best presets to create full compatibility with all browsersselect

How to start a Vue.js project

MySQL Billions of Data Import, Export and Migration Notes

PHP scheduled backup MySQL and mysqldump syntax parameters detailed

MySQL8.0.18 configuration of multiple masters and one slave

JavaScript function syntax explained

MySQL restores data through binlog

Usage and performance optimization techniques of aggregate function count in MySQL

MySQL installation and configuration methods and precautions under Windows platform

Beginners learn some HTML tags (2)

How to clean up Alibaba Cloud MySQL space