`
小风尘
  • 浏览: 3973 次
  • 性别: Icon_minigender_2
  • 来自: 广州
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

让IE浏览器支持RGBa的背景色

 
阅读更多
http://www.jb51.net/css/68590.html
点评:RGB色彩模式(也翻译为“红绿蓝”,比较少用)是工业界的一种颜色标准,是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的;并非所有浏览器都支持使用百分数值,本文介绍解决方法
RGB色彩模式(也翻译为“红绿蓝”,比较少用)是工业界的一种颜色标准,是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,RGB即是代表红、绿、蓝三个通道的颜色,这个标准几乎包括了人类视力所能感知的所有颜色,是目前运用最广的颜色系统之一。

RGBA在RGB的基础上多了控制alpha透明度的参数。以上R、G、B三个参数,正整数值的取值范围为:0 – 255。百分数值的取值范围为:0.0% – 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A参数,取值在0~1之间,不可为负值
RGBA语法:



复制代码代码如下:
div {
background: rgba(0, 0, 0, 0.5);
}

浏览器兼容性:
类型 Internet Explorer Firefox Chrome Opera Safari
版本 (×)IE6 (√)Firefox 3.0.10 (√)Chrome 2.0.x (√)Opera 9.64 (√)Safari 4
(×)IE7        
(×)IE8        
(√)IE9

RGBA和opacity的区别
opacity会使整个元素包括子元素透明,而RGBA仅仅是元素本事透明,子元素不透明。
下面具体讲讲怎样让IE浏览器支持RGBA颜色
一、CSSPIE
CSSPIE可以让color、background、 box-shadow支持RGBA
示例:

复制代码代码如下:
div{
color:rgba(0,0,0,.5);
background:rgba(0,0,0,.5);
-pie-background:rgba(0,0,0,.5);/*IE6-8*/
box-shadow: 1px 1px rgba(0,0,0,.5);/*仅在未设置模糊值的情况下支持rgba*/
}

二、filter
通过IE滤镜让背景色透明,模拟rgba效果
示例:

复制代码代码如下:
background: rgba(125, 0, 0, .3); 
         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4B7D0000 
             ,endColorstr=#4B7D0000);我们需要留意的是StartColorStr和EndColorStr的值,前两位是十六进制的透明度,后面六位是十六进制的颜色。
换算方法:x=alpha*255 将计算的结果x转换成十六进制即可
详解:DXImageTransform.Microsoft.gradient滤镜里的startColorstr参数值是#AARRGGBB形式的,其中的AA是代表不透明度的十六进制,00表示完全透明,FF就是全不透明,化成十进制的范围就是0~255,剩下的RRGGBB就是颜色的十六进制代码。例子中background: rgba(125, 0, 0, .3);表示的是30%不透明度的红色背景。如何把30%的不透明度转换成十六制呢?很简单,先计算#AA的的十进制x,x/255 = 3/10,解得x=3*255/10,然后再把x换算成十六进制,约等于4B。
分享到:
评论

相关推荐

    IE浏览器支持RGBa的背景色.docx

    IE浏览器支持RGBa的背景色.docx

    rgba的ie浏览器支持换算器

    rgba的ie浏览器支持换算器: 实现背景色透明效果的代码 实现各个浏览器中具备良好的透明特性的效果,IE中使用私有滤镜filter,高端浏览器使用CSS3中的rgba属性。 输入十六进制的颜色值以及透明度,自动在IE的过渡...

    让ie浏览器支持RGBA颜色标准实现代码

    RGB色彩模式(也翻译为“红绿蓝”,比较少用)是工业界的一种颜色标准,是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的;并非所有浏览器都支持使用百分数值,本文介绍...

    让IE支持RGBa的背景色的代码

    老版本的IE不支持RGBa的背景色,不过我们可以用滤镜实现同样的效果。

    完美解决IE8下不兼容rgba()的问题

    rgba()是css3的新属性,所以IE8及以下浏览器不兼容,这怎么办呢?终于我找到了解决办法。 解决办法 我们先来解释以下rgba rgba: rgba的含义,r代表red,g代表green,b代表blue,a代表透明度。 rgba(0,0,0,.5) 这样...

    PNG转换RGBA.exe

    因为本人用的是MCU,没使用linux或者andriod等系统,要做图片的透明叠加效果,在网上各种找PNG转565rgba和888rgba的工具软件,找了好久都一直找不到,实在没办法自己写了一个,用在本人的实际项目中。可以选择转换成...

    PicViewer RGBA32格式查看

    RGBA32格式查看,后续持续更新支持更多格式

    颜色拾取器直接使用运行exe。RGBA和16进制一键复制。有源码。

    颜色拾取器,用qt写的,更改dialog样式、设置exe图标、颜色转换,自定义事件, 点击获取,再点击界面的任何一个地方,保持按压状态,移到哪里,哪里就会有实时的颜色预览。以及RGBA格式和16进制格式输出

    RGBA数据转存BMP图片

    RGBA数据转存BMP图片。。。。。。。。。。。。。。。。。。。。 只有一个头文件,3个函数,包含使用即可。。。。。。。。。。。。。。。。。。

    RGBA(三原色+透明度)与十六进制颜色转换工具

    在实际工作的项目中,经常会用到颜色的转换,一般是 RGBA(三原色+透明度) 转换为 十六进制颜色,或者十六进制颜色转换为 RGBA,此工具提供了 JavaScript 实现的双向转换的方法工具。

    RGBA颜色混合模型

    RGBA 颜色混合模型的介绍,文章比较老,但讲的比较实用,在看层图栅格化的时候对理解反走很有帮助

    rgba8888转yuvsp420

    RGBA8888转换为YUV NV21格式的几种算法

    color-rgba:从颜色字符串中获取 rgba 数组

    颜色-rgba 将颜色字符串转换为具有 rgba 通道值的数组: "rgba(127,127,127,.1)" → [127,127,127,.1] 。用法 const rgba = require ( 'color-rgba' )rgba ( 'red' ) // [255, 0, 0, 1]rgba ( 'rgb(80, 120, 160)' )...

    PIE.htc让IE 6,7,8支持CSS3的部分属性

    让IE 6,7,8支持CSS3的部分属性。它可以让低版本IE浏览器支持CSS3的border-radius、box-shadow、border-image、CSS3 Backgrounds (-pie-background)、Gradients、RGBA属性。

    rgba8888- 副本 - 副本.py

    rgba8888- 副本 - 副本.py

    16进制和rgba颜色的相互转换

    16进制和rgba、rgb颜色的相互转换,例如#fffff可转换成rgba(255,255,255,1),或者rgba(255,255,255)。可自定义透明度。

    截屏(RGBA转RGB,RGB转JPG,JPG压缩)

    截取桌面数据(RGBA格式),RGBA转RGB,RGB转JPG,JPG任意比例压缩

Global site tag (gtag.js) - Google Analytics