css3透明教程

CSS3的出现给web设计师带来了更多的创意和想象空间，其中的透明效果应用广泛，如何实现让我们一起来学习吧！

Selector {
        opacity: value;
}

透明度属性opacity的值为0到1之间的数字，0代表完全透明，1代表完全不透明。透明度属性可以被应用于任何元素，包括背景图片。

Selector {
    /* 对于IE9及以下版本 */}
        filter: alpha(opacity=value);
    /* 对于其他浏览器 */}
        opacity: value;
}

透明度属性opacity在IE浏览器中需要落后版本的支持。IE浏览器需要使用filter属性，例如filter: alpha(opacity=50)的值代表50%的透明度效果。

/* 针对所有的表格 */table {
    /*IE9及以下版本*/}
        filter: alpha(opacity=50);
        /*其他*/    opacity: 0.5;
}
/* 针对表格上的所有列 */table tr td {
    /*IE9及以下版本*/}
        filter: alpha(opacity=50);
        /*其他*/    opacity: 0.5;
}
    

需要注意的是，当opacity属性被应用于一个元素和它的子元素时，这个透明度属性会按比例影响它们所有。例如，如果一个父元素的opacity属性被值为0.5的子元素覆盖，这个子元素变为了50%不透明。

利用CSS3的透明效果可以实现更加出色的web设计，丰富用户的视觉体验。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！