IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

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

WEB前端开发 2011-10-14 13:37:10 累计浏览 2,681 次
本机暂存

关于这个大家可以看两篇文章小志的《使用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】之间。

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

同分类推荐文章

  1. translateZ() (2026-06-25 21:18:56)
  2. translateY() (2026-06-25 21:17:56)
  3. translateX() (2026-06-25 21:16:01)

查看更多 前端 文章 →

建议继续学习

  1. css3:box-shadow边框阴影属性值详解 (累计阅读 27,109)
  2. 前端必须熟悉的10个CSS3属性 (累计阅读 7,718)
  3. 30个超棒的404错误页面 (累计阅读 7,301)
  4. 使用CSS3开启GPU硬件加速提升网站动画渲染性能 (累计阅读 6,635)
  5. css3-animation制作逐帧动画 (累计阅读 6,516)
  6. HTML5+CSS3 loading 效果收集 (累计阅读 6,438)
  7. Html5(css3)的瀑布流布局的实现 (累计阅读 5,359)
  8. 前端必须掌握30个CSS3选择器 (累计阅读 5,227)
  9. HoverDir响应鼠标移动方向的悬停效果插件 (累计阅读 5,109)
  10. [译]渐进增强:纯CSS聊天泡泡 (累计阅读 5,075)