芒果小站

  1. 全球最具业界良心的主机 - Linode

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - Linode

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - Linode

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
13

神奇的 CSS 元素透明法

作者 芒果/分类 代码/发布于 2010-11-26 00:12

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 服务器上),会导致滤镜引用的图片不可获取。所以一旦资源跨域,必须保证图片地址为绝对路径

版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/magic-css-element-opacity/" title="神奇的 CSS 元素透明法" rel="bookmark">神奇的 CSS 元素透明法 | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 13 条群众意见

  1. Kars /2010-11-26 23:55

    =.= 坚决放弃 IE6 ! 回应

    #1
  2. sk9 /2010-11-27 02:39

    偶尔用下 iepngfix 来解决,但图片要是多了,也是纠结的地方。 回应

    #2
  3. 严重浪漫 /2010-11-29 15:40

    好教材啊~
    收藏! 回应

    #3
  4. Jutoy /2010-12-01 23:02

    嗯,IE 依然是杯具~ 回应

    #4
  5. 老饕 /2010-12-04 22:00

    好吧,其实我没搞明白~~用的时候再说,先收了! 回应

    #5
  6. 黑幕困兽 /2010-12-07 22:43

    拜读博文,赞~ 回应

    #6
  7. 哲哲 /2010-12-09 13:48

    学习CSS正需要资料·· 回应

    #7
  8. 王3峰 /2010-12-10 16:23

    是应该终结 IE6 的时候了。 回应

    #8
  9. 时尚女装 /2010-12-14 15:08

    CSS 的变相玩法真是多,需要好好学习。 回应

    #9
  10. jason /2010-12-16 11:34

    朋友很不错的博客, 学习了。 回应

    #10
  11. jason /2011-01-07 13:13

    博主 谢谢分享 嘿嘿 回应

    #11
  12. 莲花 /2011-02-24 16:53

    谢谢楼主分享~~学习了…… 回应

    #12
  13. 张衡 /2011-02-26 12:05

    坚绝支持FF。。。 回应

    #13

下面我简单说几句