Trong thiết kế web, việc điều chỉnh độ mờ và độ trong suốt của phần tử giúp tạo ra các hiệu ứng hình ảnh mượt mà và bắt mắt. CSS Opacity là thuộc tính dùng để thay đổi mức độ trong suốt của một phần tử. Từ việc làm mờ đi nội dung để tạo ra các hiệu ứng hover, đến việc làm cho phần tử hoàn toàn trong suốt, thuộc tính này đóng vai trò quan trọng trong việc tạo nên giao diện hiện đại và thân thiện.

Bài viết này sẽ giúp bạn hiểu rõ hơn về cách sử dụng CSS Opacity để kiểm soát độ mờ và các kỹ thuật liên quan đến việc tạo hiệu ứng trong suốt trên trang web của bạn.

1. CSS Opacity - Độ mờ của phần tử

opacity là thuộc tính CSS cho phép bạn điều chỉnh độ mờ của một phần tử, giá trị của nó nằm trong khoảng từ 0 (hoàn toàn trong suốt) đến 1 (hoàn toàn không trong suốt).

Cú pháp:

selector {
    opacity: giá_trị; /* Giá trị nằm trong khoảng từ 0 đến 1 */
}

• opacity: 1: Phần tử hoàn toàn không trong suốt (mặc định).
• opacity: 0: Phần tử hoàn toàn trong suốt (không nhìn thấy).
• Các giá trị giữa 0 và 1 sẽ làm phần tử mờ dần đi theo mức độ.

Ví dụ:

<div class="box">Đây là một hộp</div>

.box {
    width: 200px;
    height: 200px;
    background-color: blue;
    color: white;
    opacity: 0.5; /* Phần tử này sẽ có độ mờ 50% */
}

Giải thích:

• Phần tử .box sẽ có độ trong suốt 50%, nghĩa là nó sẽ hiển thị một nửa mức độ trong suốt của màu sắc và nội dung bên trong.

Kết quả trực quan:

• Phần nền màu xanh và văn bản bên trong phần tử sẽ hiển thị với độ mờ 50%, tạo hiệu ứng phần tử mờ nhưng vẫn có thể nhìn thấy.

2. Opacity và các phần tử con

Khi bạn áp dụng opacity cho một phần tử cha, tất cả các phần tử con bên trong nó sẽ kế thừa độ mờ này. Điều này có nghĩa là toàn bộ phần tử bao gồm cả nội dung bên trong sẽ trở nên mờ đi cùng mức độ.

Ví dụ:

<div class="parent">
    <p>Văn bản này sẽ bị mờ cùng với phần tử cha.</p>
</div>

.parent {
    width: 300px;
    height: 300px;
    background-color: red;
    opacity: 0.3;
}

Giải thích:

• Phần tử cha .parent và văn bản bên trong đều có độ mờ 30%. Văn bản không thể được giữ rõ nét khi phần tử cha áp dụng opacity.

Kết quả:

• Cả nền màu đỏ và văn bản đều trở nên trong suốt 30%.

3. Tạo hiệu ứng hover với opacity

Bạn có thể sử dụng opacity để tạo các hiệu ứng tương tác cho người dùng, chẳng hạn như làm mờ hoặc làm rõ phần tử khi di chuột qua bằng pseudo-class:hover.

Ví dụ:

<div class="hover-box">Di chuột qua đây!</div>

.hover-box {
    width: 200px;
    height: 200px;
    background-color: green;
    color: white;
    opacity: 1;
    transition: opacity 0.3s; /* Tạo hiệu ứng mượt */
}

.hover-box:hover {
    opacity: 0.5;
}

Giải thích:

• Khi người dùng di chuột qua phần tử .hover-box, độ mờ của nó sẽ giảm từ 1 xuống 0.5, tạo ra hiệu ứng chuyển tiếp mượt mà.

4. Sử dụng rgba() để tạo nền trong suốt

Ngoài thuộc tính opacity, bạn cũng có thể sử dụng rgba() trong CSS để điều chỉnh độ trong suốt của màu nền (hoặc màu viền). rgba() là phiên bản mở rộng của rgb(), trong đó a đại diện cho alpha (độ trong suốt), với giá trị từ 0 đến 1.

Cú pháp:

background-color: rgba(đỏ, xanh_lá, xanh_dương, alpha);

• Alpha nằm trong khoảng từ 0 đến 1, trong đó 0 là hoàn toàn trong suốt và 1 là hoàn toàn không trong suốt.

Ví dụ:

<div class="rgba-box">Hộp với màu nền trong suốt</div>

.rgba-box {
    width: 200px;
    height: 200px;
    background-color: rgba(255, 0, 0, 0.5); /* Nền đỏ với độ mờ 50% */
    color: white;
}

Giải thích:

• Phần tử .rgba-box có màu nền đỏ với độ trong suốt 50%, tạo hiệu ứng nền mờ nhưng văn bản bên trong vẫn giữ được độ rõ nét hoàn toàn.

Kết quả:

• Nền màu đỏ sẽ mờ đi 50%, trong khi văn bản màu trắng vẫn hiển thị rõ ràng.

5. Opacity so với rgba() - Khi nào nên sử dụng?

Nên sử dụng opacity khi:

• Bạn muốn làm mờ toàn bộ phần tử bao gồm cả nội dung và các phần tử con.

Nên sử dụng rgba() khi:

• Bạn muốn kiểm soát độ trong suốt của nền hoặc viền mà không ảnh hưởng đến độ rõ của văn bản hoặc các phần tử con.

6. Sử dụng opacity với hình ảnh

Bạn cũng có thể sử dụng thuộc tính opacity với hình ảnh để tạo hiệu ứng mờ dần hoặc làm rõ khi di chuột qua.

Ví dụ:

<img src="image.jpg" class="image-opacity" alt="Hình ảnh mẫu">

.image-opacity {
    width: 300px;
    opacity: 0.8; /* Hình ảnh có độ mờ 80% */
    transition: opacity 0.3s; /* Hiệu ứng mượt khi thay đổi */
}

.image-opacity:hover {
    opacity: 1; /* Khi di chuột, hình ảnh sẽ rõ nét */
}

Giải thích:

• Hình ảnh sẽ có độ mờ 80% khi trang được tải. Khi người dùng di chuột qua hình ảnh, nó sẽ trở nên rõ nét hơn với opacity: 1.

7. Layering - Kết hợp opacity với z-index

Khi làm việc với nhiều lớp phần tử chồng lên nhau, bạn có thể sử dụng opacity cùng với z-index để tạo các hiệu ứng phân lớp (layering), làm cho các phần tử phía sau mờ đi hoặc rõ nét hơn.

Ví dụ:

<div class="background-layer"></div>
<div class="foreground-layer">Nội dung nổi bật</div>

.background-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.5;
    z-index: 1;
}

.foreground-layer {
    position: relative;
    color: white;
    z-index: 2;
}

Giải thích:

• Phần tử .background-layer sẽ hiển thị phía sau với độ mờ 50%, trong khi nội dung của .foreground-layer sẽ nổi bật hơn phía trước.

Kết luận

Opacity và Transparency trong CSS là những công cụ mạnh mẽ để tạo ra các hiệu ứng thị giác tinh tế, giúp nâng cao trải nghiệm người dùng. Bạn có thể sử dụng opacity để làm mờ toàn bộ phần tử, hoặc sử dụng rgba() để kiểm soát độ trong suốt của màu sắc mà không ảnh hưởng đến nội dung bên trong. Cùng với các kỹ thuật khác như hover và layering, bạn có thể tạo ra các hiệu ứng tương tác hấp dẫn cho trang web của mình.