Thuộc tính opacity trong CSS

Đây là cú pháp cập nhật nhất cho độ mờ đục (opacity) trong tất cả các trình duyệt hiện tại.

p {
    opacity: 0.7;
}

Quy tắc CSS trên sẽ làm cho phần tử <p> bị mờ mờ. Độ sắc nét chỉ còn 70% (hoặc độ trong suốt là 30%).

Thuộc tính opacity nhận giá trị từ 0,0 đến 1,0.

Thiết lập opacity: 1; sẽ làm cho phần tử hoàn toàn nguyên bản (tức độ trong suốt là 0%), trong khi opacity: 0; sẽ làm cho phần tử hoàn toàn trong suốt (tức là trong suốt 100%).

IE 8 và phiên bản cũ hơn hỗ trợ thuộc tính chỉ Microsoft filter: alpha để kiểm soát độ mờ đục của một phần tử.

p {
    filter: alpha(opacity=50);
    zoom: 1;  /* fix cho IE7 */
}

Lưu ý: Bộ lọc alpha trong IE chấp nhận các giá trị từ 0 đến 100. Giá trị 0 làm cho phần tử hoàn toàn trong suốt (tức là 100% trong suốt), trong khi giá trị 100 làm cho phần tử hoàn toàn không trong suốt (tức là 0% trong suốt).

Kết hợp cả hai bước trên, bạn sẽ có thể thiết lập độ trong suốt cho tất cả các trình duyệt.

p {
    opacity: 0.5;  /* Opacity trong các trình duyệt hiện đại */
    filter: alpha(opacity=50);  /* Opacity cho IE8 trở xuống */
    zoom: 1;  /* fix cho IE7 */
}

Cảnh báo: Việc thêm bộ lọc alpha để kiểm soát độ trong suốt trong IE 8 và các phiên bản thấp hơn sẽ tạo ra mã không hợp lệ trong CSS của bạn vì đây là thuộc tính chỉ của Microsoft, không phải thuộc tính CSS chuẩn.

Bạn cũng có thể tạo hình ảnh trong suốt bằng cách sử dụng thuộc tính Opacity trong CSS.

img {
    opacity: 0.1;
}

Thay đổi opacity của hình ảnh khi di chuột qua

Ví dụ sau minh họa ứng dụng phổ biến của opacity trong CSS, trong đó độ mờ đục của hình ảnh thay đổi khi người dùng di chuyển con trỏ chuột qua hình ảnh.

// Bình thường cho mờ đi
img {
    opacity: 0.5;
}

// Khi di chuột qua thì cho sắc nét lên
img:hover {
    opacity: 1;
}

Thay đổi opacity cho phần tử

Khi sử dụng thuộc tính opacity trên một phần tử, không chỉ nền của phần tử bị mờ mờ đi mà tất cả các phần tử con của nó cũng bị ảnh hưởng.

Nó làm cho văn bản bên trong phần tử mờ đi, khó đọc nếu giá trị của độ mờ trở nên cao hơn.

Để tránh vấn đề này thì bạn nên sử dụng tách biệt opacity nếu không muốn nó tác động chung.

Sau đó chỉ cần sử dụng margin hoặc Position để căn chỉnh lại cho các phần tử con là được.

Ví dụ:

<div></div>
<p>Đoạn văn bản này được tách ra. Không bị ảnh hưởng bởi thuộc tính opacity</p>

Ở trên, ta có một div và một phần tử p.

Tuy nhiên, chúng ta tách nó ra, thay vì đặt p bên trong div.

Và sau đó sử dụng position để điều chỉnh vị trí của nó.

CSS:

div {
    width: 350px;
    height: 200px;
    float: left;
    background-color: blue;
    opacity: 0.1;
    position: absolute;
}
p {
    width: 300px;
    font-size: 18px;
    position: relative;
    top: 20px;
    left: 20px;
}

Trên đây là bài viết của eLib.VN về thuộc tính opacity trong CSS. Như vậy, qua bài học này bạn đã biết cách sử dụng thuộc tính opactity trong CSS để kiểm soát độ mờ đục, quyết định cho nó mờ mờ hay trong suốt hoàn toàn. Chúc các bạn thành công!