Cách chỉnh một vài hiệu ứng đơn giản cho hình ảnh - 25

Cách chỉnh một vài hiệu ứng đơn giản cho hình ảnh – 25

– Trong bài viết này, các bạn sẽ được tìm hiểu cách sử dụng thuộc tính filter để chỉnh một vài hiệu ứng đơn giản cho hình ảnh, ví dụ như: đen trắng, mờ ảo, tương phản, trong suốt, . . . .

– Để sử dụng thuộc tính filter thì chúng ta dùng cú pháp như sau: filter: value;

– Trong đó, value có thể được xác định dựa theo một trong mười hai loại giá trị.

none: Không tạo bất kỳ một hiệu ứng gì cho hình ảnh.
blur(): Chỉnh hiệu ứng mờ ảo cho hình ảnh.

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        img{
            filter:blur(0px);
        }
    </style>
</head>
<body>
    <img src="https://dsmart.vn/wp-content/uploads/2022/10/pineapple.jpg">
</body>
</html>

brightness(): Chỉnh độ sáng tối của hình ảnh.

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        img{
            filter:brightness(61%);
        }
    </style>
</head>
<body>
    <img src="https://dsmart.vn/wp-content/uploads/2022/10/pineapple.jpg">
</body>
</html>

contrast(): Chỉnh độ tương phản của hình ảnh.

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        img{
            filter:contrast(309%);
        }
    </style>
</head>
<body>
    <img src="https://dsmart.vn/wp-content/uploads/2022/10/pineapple.jpg">
</body>
</html>

saturate(): Chỉnh độ bão hòa của hình ảnh.

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        img{
            filter:saturate(593%);
        }
    </style>
</head>
<body>
    <img src="https://dsmart.vn/wp-content/uploads/2022/10/pineapple.jpg">
</body>
</html>

opacity(): Chỉnh độ trong suốt của hình ảnh.

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        img{
            filter:opacity(65%);
        }
    </style>
</head>
<body>
    <img src="https://dsmart.vn/wp-content/uploads/2022/10/pineapple.jpg">
</body>
</html>

grayscale(): Chuyển hình ảnh sang dạng ảnh trắng đen.

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        img{
            filter:grayscale(73%);
        }
    </style>
</head>
<body>
    <img src="https://dsmart.vn/wp-content/uploads/2022/10/pineapple.jpg">
</body>
</html>

sepia(): Chuyển hình ảnh sang dạng ảnh nâu đỏ.

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        img{
            filter:sepia(42%);
        }
    </style>
</head>
<body>
    <img src="https://dsmart.vn/wp-content/uploads/2022/10/pineapple.jpg">
</body>
</html>

hue-rotate(): Chuyển đổi màu xoay vòng cho hình ảnh.

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        img{
            filter:hue-rotate(140deg);
        }
    </style>
</head>
<body>
    <img src="https://dsmart.vn/wp-content/uploads/2022/10/pineapple.jpg">
</body>
</html>

drop-shadow(): Tạo một cái bóng cho hình ảnh.

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        img{
            filter:drop-shadow(3px 3px 5px #333);
        }
    </style>
</head>
<body>
    <img src="https://dsmart.vn/wp-content/uploads/2022/10/pineapple.jpg">
</body>
</html>

initial: Tạo một cái bóng cho hình ảnh (mặc định thì thuộc tính filter có giá trị là none).
inherit: Kế thừa giá trị thuộc tính filter từ phần tử cha của nó.