Tidadigi Logo

CSS fill-opacity Property

Thuộc tính fill-opacity được sử dụng để thiết lập độ mờ của paint server cho hình dạng. Về cơ bản, nó dùng để đặt mức độ mờ của màu nền cho hình dạng SVG. Nó xác định độ trong suốt của nền, với giá trị từ 0 đến 1. 0 là hoàn toàn trong suốt và 1 là hoàn toàn mờ đục.

Cú pháp:

fill-opacity: [0-1] | <percentage>

Giá trị thuộc tính:

  • Giá trị từ 0 đến 1: Dùng để đặt độ mờ của nền bằng giá trị thập phân. Giá trị 0 nghĩa là nền hoàn toàn trong suốt và không nhìn thấy. Giá trị 1 nghĩa là nền hoàn toàn mờ đục và nhìn thấy. Một giá trị thập phân giữa hai giá trị này sẽ cho nền bán trong suốt.
  • percentage: Dùng để đặt độ mờ của nền bằng giá trị phần trăm. Giá trị 0% nghĩa là nền hoàn toàn trong suốt và không nhìn thấy. Giá trị 100% nghĩa là nền hoàn toàn mờ đục và nhìn thấy. Một giá trị phần trăm giữa hai giá trị này sẽ cho nền bán trong suốt.

Ví dụ 1: Trong ví dụ này, chúng ta sử dụng giá trị thuộc tính giữa 0 và 1.

html 
<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | fill-opacity
    </title>
    <style>
        .opacity1 {
            /* completely
        visible fill */
            fill-opacity: 1.0;

            fill: green;
        }

        .opacity2 {
            fill-opacity: 0.5;

            fill: green;
        }

        .opacity3 {
            fill-opacity: 0.25;

            fill: green;
        }

        .opacity4 {
            /* completely
        transparent fill */
            fill-opacity: 0;

            fill: green;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <b>
        CSS | fill-opacity
    </b>
    <div class="container">
        <svg height="250px" 
             width="500px" 
             xmlns="http://www.w3.org/2000/svg" 
             version="1.1">
            <circle class="opacity1" cx="100" cy="100" r="50" />
            <circle class="opacity2" cx="250" cy="100" r="50" />
            <circle class="opacity3" cx="400" cy="100" r="50" />
            <circle class="opacity4" cx="400" cy="100" r="50" />
        </svg>
    </div>
</body>
</html>

Đầu ra:

 css-fill-opacity-property

Ví dụ 2: Trong ví dụ này, chúng ta sử dụng giá trị thuộc tính theo phần trăm.

html 
<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | fill-opacity
    </title>
    <style>
        .opacity1 {
            /* completely visible
        fill */
            fill-opacity: 100%;

            fill: green;
        }

        .opacity2 {
            fill-opacity: 50%;

            fill: green;
        }

        .opacity3 {
            fill-opacity: 25%;

            fill: green;
        }

        .opacity4 {
            /* completely
        transparent fill */
            fill-opacity: 0%;

            fill: green;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <b>
        CSS | fill-opacity
    </b>
    <div class="container">
        <svg height="250px" 
             width="500px" 
             xmlns="http://www.w3.org/2000/svg" 
             version="1.1">
            <rect class="opacity1" x="25" y="10" height="150" width="100" />
            <rect class="opacity2" x="175" y="10" height="150" width="100" />
            <rect class="opacity3" x="325" y="10" height="150" width="100" />
            <rect class="opacity4" x="325" y="10" height="150" width="100" />
        </svg>
    </div>
</body>
</html>

Đầu ra: 

css-fill-opacity-property

Trình duyệt được hỗ trợ: Các trình duyệt được hỗ trợ bởi thuộc tính fill-opacity được liệt kê bên dưới:

  • Chrome
  • Firefox
  • Safari
  • Opera
  • Internet Explorer 9

Last Updated : 21/07/2025