Thuộc tính opacity trong CSS – Tự học CSS3

Posted on by adminChuyên mục:Kiến thức Internet

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

Độ mờ đục ( opacity ) giờ đây là một phần của đặc tả CSS3, nhưng nó đã xuất hiện từ rất lâu. Tuy nhiên, những trình duyệt cũ có nhiều cách khác nhau để trấn áp độ 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 update nhất cho độ mờ đục ( opacity ) trong tổng thể những 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ử 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 đồng ý những giá trị từ 0 đến 100. Giá trị 0 làm cho thành phần trọn vẹn trong suốt ( tức là 100 % trong suốt ), trong khi giá trị 100 làm cho thành phần trọn vẹ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ẽ hoàn toàn có thể thiết lập độ trong suốt cho toàn bộ những 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 hoàn toàn 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ổ cập của opacity trong CSS, trong đó độ mờ đục của hình ảnh đổi khác khi người dùng chuyển dời 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 thành phần mờ đi, khó đọc nếu giá trị của độ mờ trở nên cao hơn .
Để tránh yếu tố này thì bạn nên sử dụng tách biệt opacity nếu không muốn nó ảnh hưởng tác động chung .
Sau đó chỉ cần sử dụng margin hoặc Position để chỉnh sửa lại cho những thành phần con là được .
Ví dụ :


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

Ở trên, ta có một div và một thành phần p .
Tuy nhiên, tất cả chúng ta tách nó ra, thay vì đặt p bên trong div .
Và sau đó sử dụng position để kiểm soát và đ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

admin