使用IE过渡滤镜和CSS3中的RGBA属性完成背景色透明效果

关于这个大家可以看两篇文章小志的《使用IE过渡滤镜和CSS3中的RGBA属性完成背景色透明效果》和小鱼的《背景半透明最佳实践》,这里就不展开了,这里提供一个小志的CSS背景颜色属性值转换工具,并在他的基础上做了少许的修改,还有就是被小志严重鄙视的去掉了提示!嘎嘎!

关于工具:

实现各个浏览器中具备良好的透明特性的效果,IE中使用私有滤镜filter,高端浏览器使用CSS3中的rgba属性。

输入十六进制的颜色值以及透明度,自动在IE的过渡滤镜以及CSS3中的rgba属性之间进行十六进制与十进制的换算。

说明:

1.样式名选项,例如:.rgba,填样式名选项后会自动导出IE9的兼容方案,不填样式名直接输出样式属性,请自己写IE9的hack

单独把 IE9 的 filter 变成透明度为 0 即可。高级浏览器大部分支持 :root 伪类,但不支持 filter 属性,而 IE 只有 IE9 支持,所以我们可以这样写。代码如下:

:root .rgba{filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=’#00000000′, EndColorStr=’#00000000′); }
2.颜色值选项:十六进制是从【0】到【9】以及【a】到【f】组合而成的,再来一次吧!\n如果是十六进制的缩写,是前后相邻的字母可简写成为一个,例如【#FF000FF】可转为【#F0F】\n请检查你的颜色值是否为【三位】或者符合【十六进制的组合方式】。

3.透明度现象:透明度的值在【0】到【1】之间。

工具地址:https://www.css88.com/demo/hex_color/

 

赞(0) 打赏
未经允许不得转载:WEB前端开发 » 使用IE过渡滤镜和CSS3中的RGBA属性完成背景色透明效果

评论 9

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    额……多了一些功能,赞一个先。
    然后继续BS没有错误提示,以及错误提示还存在等一些不爽的东西。

    林小志7年前 (2011-10-13)回复
  2. #-48

    附带再说一下,突然看到导航下面有一个红色的进度条,表示页面加载的过程,不错。赞哦~

    林小志7年前 (2011-10-13)回复
  3. #-47

    红色加载进度条是怎么实现的?

    设计蜂巢7年前 (2011-10-19)回复
  4. #-46

    <ie9下可以实现元素斜角么

    welpher.yu7年前 (2011-10-31)回复
  5. #-45

    IE6测试达不到这样的效果。。。

    okboying7年前 (2011-11-01)回复
  6. #-44

    你好,关于这个方法,有点问题,比如我作一个弹出框,是以这个做个半透明的边框,现在弹出框里面有个表情的弹出框,是相对弹出框内某节点定位的,现在这个表情弹出框大小超出了用Gradiend做的透明边框,超的部分就被隐藏了,不知道有没有好的解决方法。

    筱桀7年前 (2011-11-21)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏