CSS Opacity

Posted on by mtoplistChuyên mục:Top List

Thuộc tính opacity chỉ định độ mờ/ độ trong của phần tử HTML.

Transparent image

Thuộc tính opacity nhận giá trị từ 0.0 đến 1.0 . Giá trị càng thấp thì càng trong suốt (transparent).

CSS OpacityOpacity 0.2 CSS OpacityOpacity 0.8CSS OpacityOpacity 1 (Mặc định)


img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}

Chú ý: IE8 trở về trước sử dụng filter:alpha(opacity=x). Giá trị x nhận từ 0 – 100. Giá trị càng thấp thì càng trong suốt (transparent).

Hiệu ứng hover với opacity

Thuộc tính opacity thường được dùng với :hover selector để change trạng thái khi hover chuột vào phần tử.

CSS OpacityOpacity 0.2 CSS OpacityOpacity 0.8CSS OpacityOpacity 1 (Mặc định)


img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
img:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}

Transparent Box

Khi sử dụng thuộc tính opacity cho phần tử thì các phần tử con nó cũng thừa kế giá trị đó. Điều này có thể làm cho các đoạn text trong phần tử con bị mờ theo và khó đọc đối với người dùng.

Opacity: 1 Opacity: 0.6 Opacity: 0.1


div {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}

Transparent sử dụng hệ màu RGBA

Nếu bạn không muốn opacity ảnh hưởng lên các phần tử con của nó, thì có thể sử dụng hệ màu RGBA. Xem ví dụ bên dưới :

Opacity: 1 Opacity: 0.6 Opacity: 0.1


div {
background: rgba(0,128,0,0.5);
}

Chú ý: Nếu bạn chưa biết cách dùng hệ màu RGBA thì có thể xem lại bài học này: CSS Colors

Bài học CSS Opacity đến đây là kết thúc. Chúc các bạn thực hành thành công.

mtoplist