CSS opacity() Function

Hàm opacity() là một hàm dựng sẵn. Nó được sử dụng để áp dụng filter lên ảnh, đặt độ trong suốt.

Cú pháp:

opacity( amount )

Tham số: Hàm này chấp nhận một tham số duy nhất là amount. Tham số này chứa giá trị độ trong suốt. Giá trị opacity được đặt theo số hoặc phần trăm. Giá trị 0% biểu thị ảnh trong suốt hoàn toàn. 100% biểu thị ảnh gốc.

Ví dụ sau minh họa cách sử dụng hàm opacity() trong CSS:

Ví dụ:

html

<!DOCTYPE html> 
<html> 

<head> 
    <title>CSS opacity() Function</title> 
    
    <style>
        h1 {
            color:green;
        }
        body {
            text-align:center;
        }
        .opacity_effect {
            filter: opacity(30%);
        }
    </style>
</head> 

<body> 
    <h1>GeeksforGeeks</h1> 
    
    <h2>CSS opacity() function</h2>
    
    <img class="opacity_effect" src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
        alt="GeeksforGeeks logo"> 
</body> 

</html>

Đầu ra:

css-opacity-function

Các trình duyệt được hỗ trợ: Các trình duyệt được hỗ trợ bởi hàm opacity() được liệt kê dưới đây:

Google Chrome 18 trở lên
Edge 12 trở lên
Internet Explorer không được hỗ trợ
Firefox 35 trở lên
Safari 6 trở lên
Opera 15 trở lên

Last Updated : 21/07/2025

CSS opacity() Function

CSS rotate3d() Function

CSS scaleX() Function

CSS scaleZ() Function

CSS Align

CSS Font Border

CSS invert() Function

CSS hue-rotate() Function

CSS grayscale() Function

CSS drop-shadow() Function

CSS contrast() Function

CSS