Introduction to the use of CSS3 filter attribute

Time:2021-9-15

1、 Foreword

When compiling the animation effect of the front-end page, the filter attribute will be used more or less. Due to its too many attribute values, this article is used to sort out and record its relevant data.

2、 Introduction

The filter attribute defines the visual effect of the element (usually).

The attribute values are as follows:

Attribute value describe
none Default, no effect.
blur(px) If Gaussian blur is set for the image, the default value is 0.
brightness(%) Apply a linear multiplication to the picture to make it look brighter or darker. The default value is 1.
contrast(%) Adjust the contrast of the image. The default value is 1.
grayscale(%) Converts an image to a grayscale image. The default value is 0.
hue-rotate(deg) Apply hue rotation to the image. The default value is 0DEG.
invert(%) Inverts the input image. The default value is 0.
opacity(%) The transparency of the converted image. The default value is 1.
saturate(%) Convert image saturation. The default value is 1.
sepia(%) Converts the image to dark brown, the default value is 0.

Note: the filter is usually expressed as a percentage (e.g. 75%), of course, it can also be expressed as a decimal (e.g. 0.75).

3、 Demo code

<!DOCTYPE html>
<html lang="zh">
<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 the attribute on the left to display the effect</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>
                <li data-p="grayscale(1)">filter: grayscale(1)</li>
                <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>
                <li data-p="saturate(.5)">filter: saturate(.5)</li>
                <li data-p="sepia(.5)">filter: sepia(.5)</li>
            </ul>
        </div>
        <div class="box">
            <div class="origin">
                <img src="https://imgs.developpaper.com/imgs/87c01ec7gy1frmmmwb3anj21hc0u0b2a.jpg" alt="">
            </div>
            < div > original < / div >
        </div>
        <div class="box">
            <div id="filter">
                <img src="https://imgs.developpaper.com/imgs/87c01ec7gy1frmmmwb3anj21hc0u0b2a.jpg" alt="">
            </div>
            < div id = "info" > renderings < / 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 details of the introduction to the use of CSS3 filter attribute. For more information about CSS3 filter attribute, please pay attention to other related articles of developeppaer!