Thuộc tính opacity trong CSS

Độ mờ đục (opacity) bây giờ là một phần của đặc tả CSS3, nhưng nó đã có mặt từ rất lâu. Tuy nhiên, các trình duyệt cũ có nhiều cách khác nhau để kiểm soát độ mờ hoặc độ trong suốt.

Thuộc tính opacity trong CSS

Thuộc tính opacity trong CSS chỉ định độ mờ đục của một phần tử nào đó.

Độ mờ đục (opacity) bây giờ là một phần của đặc tả CSS3, nhưng nó đã có mặt từ rất lâu. Tuy nhiên, các trình duyệt cũ có nhiều cách khác nhau để kiểm soát độ mờ hoặc độ trong suốt.

Thuộc tính opacity trong CSS

Opacity trong Firefox, Safari, Chrome, Opera và IE9

Đâ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%).

Opacity trong Internet Explorer 8 trở xuống

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).

Opacity cho tất cả trình duyệ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.

Thiết lập Opacity cho ảnh

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;
}

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.

Học tiếp: Bộ chọn thuộc tính trong CSS

Đọc thêm: Media Type trong CSS

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *