神奇的 CSS 元素透明法

1、HTML 元素透明

着实自己，CSS 实现元素透明是件轻易事儿。直接上代码：

opacity:.5

opacity 指的是不透明度，取值为 0~1 之间，1 暗示完全不透明，0 暗示完全透明。

A 级赏识器根基都支持 opacity 属性，但碰上 IE，总没功德。不外 IE 有滤镜，可以辅佐我们血口喷人地搞定不透明度：

filter:alpha(opacity=50);

注：究竟上会遇到透明配景层，而 opacity 属性是会担任的，停止这个题目，必要团结定位来实现。

在 CSS3 中，还可以行使 HSLA（色调、饱和、亮度、透明度）可能 RGBA（红、绿、蓝、透明度）来实现元素透明。譬喻：

background: hsla(0,100%,50%,0.5);
background: rgba(0,0,0,0.5);

2、配景图片透明

有一个值得存眷的题目是，PNG8 名目标图片在 IE6 下仅支持全透明，也就是说，IE6 下行使 PNG8 无法实现配景的半透明结果。透不透明着实偶然辰无所谓，但题目是全透明状态下，会导致图片呈现恶心的毛边。固然可以在导出 PNG8 时，通过选择杂边颜色可能去除杂边的方法办理，但并不美满。

可喜的是，PNG24 支持全透明，以是 PNG24 就很威猛了，在图片透明的方案中，它绝对是武力指数最高的。

但碰上 IE，另一个恶心的题目又呈现了，IE6 不支持支持半透明的 PNG24 透明图片（也许有点拗口）。

咋办？滤镜！

直接上代码：

_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='mangguo.png',sizingMethod='crop');

但碰上 IE6，又悲剧了。在 CSS 文档和页面地点纷歧致时（好比许多网站会将静态资源安排于和站点自己差异域的 CDN 处事器上），会导致滤镜引用的图片不行获取。以是一旦资源跨域，必需担保图片地点为绝对路径。

来历：http://www.mangguo.org/

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!