Introduction to the use of CSS3 filter attribute

1. Introduction

When writing animation effects for front-end pages, the filter attribute will be used more or less. Since there are too many attribute values, this article is used to organize and record its related information.

II. Introduction

The filter attribute defines a visual effect on an element (usually ).

The property values are as follows:

Property Value	describe
none	Default value, no effect.
blur(px)	Set Gaussian blur to the image. The default value is 0.
brightness(%)	Applies a linear multiplication to the image, making it appear brighter or darker. The default value is 1.
contrast(%)	Adjust the contrast of the image. The default value is 1.
grayscale(%)	Convert the image to grayscale. The default value is 0.
hue-rotate(deg)	Applies hue rotation to the image. The default value is 0deg.
invert(%)	Invert the input image. The default value is 0.
opacity(%)	The transparency level of the converted image. The default value is 1.
Saturate(%)	Convert image saturation, the default value is 1.
sepia(%)	Convert the image to sepia. The default value is 0.

Note: Filters are usually expressed as percentages (such as 75%), but can also be expressed as decimals (such as 0.75).

3. Demonstration Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container {
            margin: 4rem auto;
            width: 100%;
            height: auto;
            text-align: center;
        }

        .box {
            display: inline-block;
            margin: 1rem;
        }

        .box ul {
            margin: 0;
            padding: 0;
            list-style: none;
            text-align: left;
        }

        .box ul li {
            margin: .25rem 0;
            padding: .25rem;
            cursor: pointer;
        }

        .box ul li:hover {
            background-color: #eee;
        }

        ul li.active {
            background-color: #eee;
        }

       .box img {
            width: 260px;
            height: 260px;
        }

    </style>
</head>
<body>
    <div class="container">
        <h3>Click on the left side to display the properties</h3>
        <div class="box">
            <ul>
                <li data-p="blur(5px)">filter: blur(5px)</li>
                <li data-p="brightness(.5)">filter: brightness(.5)</li>
                <li data-p="contrast(.5)">filter: contrast(.5)</li>
                filter: grayscale(1)
                <li data-p="hue-rotate(90deg)">filter: hue-rotate(90deg)</li>
                <li data-p="invert(.4)">filter: invert(.4)</li>
                <li data-p="opacity(.4)">filter: opacity(.4)</li>
                filter: saturate(.5)
                <li data-p="sepia(.5)">filter: sepia(.5)</li>
            </ul>
        </div>
        <div class="box">
            <div class="origin">
                <img src="upload/2022/web/87c01ec7gy1frmmmwb3anj21hc0u0b2a.jpg" alt="">
            </div>
            <div>Original image</div>
        </div>
        <div class="box">
            <div id="filter">
                <img src="upload/2022/web/87c01ec7gy1frmmmwb3anj21hc0u0b2a.jpg" alt="">
            </div>
            <div id="info">Effect diagram</div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
    <script>
        $(function() {
                let $lis = $("li");
               $lis.on("click", function() {
                    $lis.removeClass("active");
                    let p = $(this).addClass("active").data("p");
                    $("#filter").css({"filter": p});
                    $("#info").text("filter: " + p);
               });
        });
    </script>
</body>
</html>

The above is the detailed introduction to the use of CSS3 filter attributes. For more information about CSS3 filter attributes, please pay attention to other related articles on 123WORDPRESS.COM!

<<: A brief discussion on the problem that the text in the button is not centered vertically in the browser's compatibility mode

>>: Pygame code to make a snake game

Summary of common MySQL function examples [aggregate functions, strings, numbers, time and date processing, etc.]

Introduction to the use of CSS3 filter attribute

1. Introduction

II. Introduction

3. Demonstration Code

Summary of common MySQL function examples [aggregate functions, strings, numbers, time and date processing, etc.]

Two methods to implement Mysql remote connection configuration

Let's talk in detail about the props attributes of components in Vue

Detailed explanation of data type issues in JS array index detection

A brief discussion on the solution of Tomcat garbled code and port occupation

Detailed explanation of Vue router routing

Introduction to JavaScript built-in objects

Several ways to encapsulate axios in Vue

Solutions to black screen when installing Ubuntu (3 types)

jQuery implements accordion small case

Recommend

Detailed steps for porting busybox to build a minimal root file system

Introduction to Apache deployment of https in cryptography

VMware vSphere 6.7 (ESXI 6.7) graphic installation steps

Sample code for implementing multi-application deployment using tomcat+nginx

How to configure the OpenWRT development environment on Ubuntu 18.04 (physical machine)

Detailed explanation of the problems and solutions caused by floating elements

MySQL database must know sql statements (enhanced version)

Detailed explanation of Docker Compose deployment and basic usage

The pitfall record of the rubber rebound effect of iOS WeChat H5 page

Detailed explanation of JDBC database link and related method encapsulation

Use of SerialPort module in Node.js

HTML+CSS+JavaScript to make a girlfriend version of scratch card (you will learn it once you see it)

Methods for optimizing Oracle database with large memory pages in Linux

Detailed explanation of Linux command unzip

Detailed explanation of the role of overflow:hidden (overflow hiding, clearing floats, solving margin collapse)