CSS Transparency Cho Tất Cả Các Trình Duyệt

06/05/2020

CSS Transparency Cho Tất Cả Các Trình Duyệt

Transparency ( độ trong suốt ) là một trong những thuộc tính của CSS đòi hỏi rất nhiều các thuộc tính và giá trị khác nhau để đảm bảo khả năng tương thích với các trình duyệt. Để làm được điều này, bạn cần một nhóm các câu lệnh CSS. May mắn thay chúng không can thiệp vào nhau, vì vậy sử dụng chúng khi nào bạn muốn mà không cần phải lo lắng. Ví dụ sau được thiết lập 50% transparency:

.transparent {
    /* Required for IE 5, 6, 7 */
    /* ...or something to trigger hasLayout, like zoom: 1; */
    width: 100%;

    /* 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)";

    /* This works in IE 8 & 9 too */
    /* ... but also 5, 6, 7 */
    filter: alpha(opacity=50);

    /* Older than Firefox 0.9 */
    -moz-opacity:0.5;

    /* Safari 1.x (pre WebKit!) */
    -khtml-opacity: 0.5;

    /* Modern!
    /* Firefox 0.9+, Safari 2?, Chrome any?
    /* Opera 9+, IE 9+ */
    opacity: 0.5;
}

Mình khuyên bạn nên sử dụng định dạng sau, chỉ đơn giản copy & paste:

.transparent {
    zoom: 1;
    filter: alpha(opacity=50);
    opacity: 0.5;
}