Độ mờ - Thủ thuật CSS

Các opacitybất động sản trong CSS quy định cụ thể như thế nào trong suốt một yếu tố là.

Sử dụng cơ bản:

div ( opacity: 0.5; )

Độ mờ đục có giá trị ban đầu mặc định là 1 (100% không trong suốt). Độ mờ không được kế thừa, mà do độ mờ gốc áp dụng cho mọi thứ bên trong nó. Bạn không thể làm cho phần tử con kém minh bạch hơn phần tử gốc mà không có một số thủ thuật. Giá trị là một số từ 0 đến 1 thể hiện độ mờ của kênh (kênh “alpha”). Khi một phần tử có giá trị 0 thì phần tử đó hoàn toàn vô hình; giá trị 1 là hoàn toàn không trong suốt (rắn).

Kiểm tra cây bút này!

Tương thích IE

Nếu bạn muốn opacity hoạt động trong tất cả các phiên bản IE, thứ tự phải như sau:

.opaque ( /* Theoretically for IE 8 & 9 (more valid) */ /*… but not required as filter works too */ /* should come BEFORE filter */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE8 /* This works in IE 8 & 9 too */ /*… but also 5, 6, 7 */ filter: alpha(opacity=50); // IE 5-7 /* Modern Browsers */ opacity: 0.5; )

Nếu bạn không sử dụng lệnh này, IE8-as-IE7 không áp dụng độ mờ, mặc dù IE8 và IE7 thuần túy đều có.

Lưu ý về các bối cảnh xếp chồng

Nếu một phần tử có opacityvà giá trị nhỏ hơn 1 được định vị, thuộc z-indextính sẽ áp dụng như được mô tả trong CSS2.1, ngoại trừ việc autogiá trị được coi là 0 vì ngữ cảnh xếp chồng mới luôn được tạo.

Opacity có thể được sử dụng như một sự thay thế cho thuộc visibilitytính: visibility: hidden;giống như opacity: 0;.