`
moneyinto
  • 浏览: 32479 次
  • 性别: Icon_minigender_1
  • 来自: 东台
社区版块
存档分类
最新评论
阅读更多

 

在调试ie8兼容性的问题时,发现ie8不支持rgba。

关于rgba(),即为颜色设置的方法函数,rgb代表颜色,a代表透明度。

如rgba(0,0,0,0.1)表示透明值为0.1的黑色。

 

<div style="height:100px;width:100px;rgba(196, 50, 61,0.7)"></div>

 

如上,是一个红色透明的正方形的方块,但在ie8中不能正常显示,只能显示成一个透明的模块,也就是看不见了。

 

这时就需要使用ie的filter来解决rgba的问题,从网上看到这样一句解决写法:

 

<div style="height:100px;width:100px;rgba(196, 50, 61,0.7);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2C4323D,endColorstr=#B2C4323D);"></div>
 

 

 这里的#B2C4323D是对颜色和透明度设置。#后前两位是对透明度的设置,而接下来的6位是16进制的颜色设置。

 

关于透明度和IEfilter之间的换算:

 

rgba透明值 IEfilter
0.1 19
0.2 33
0.3 4C
0.4 66
0.5 7F
0.6 99
0.7 B2
0.8 C8
0.9 E5

 

下面是RGB颜色与16进制颜色的换算方法:

 

比如rgb(196, 50, 61),

196/16等于12余4,12对应的是C,所以196对应的值C4,

50/16等于3余2,所以对应的值为32,

61/16等于3余13,所以对应的值为3D。

因此rgb(196, 50, 61)对应的值为#C4323D。

 

下面是RGB颜色与16进制颜色的换算表:

 

RGB HEX
0 00
1 01
2 02
3 03
4 04
5 05
6 06
7 07
8 08
9 09
10 0A
11 0B
12 0C
13 0D
14 0E
15 0F
16 10
17 11
18 12
19 13
20 14
21 15
22 16
23 17
24 18
25 19
26 1A
27 1B
28 1C
29 1D
30 1E
31 1F
32 20
33 21
34 22
35 23
36 24
37 25
38 26
39 27
40 28
41 29
42 2A
43 2B
44 2C
45 2D
46 2E
47 2F
48 30
49 31
50 32
51 33
52 34
53 35
54 36
55 37
56 38
57 39
58 3A
59 3B
60 3C
61 3D
62 3E
63 3F
64 40
65 41
66 42
67 43
68 44
69 45
70 46
71 47
72 48
73 49
74 4A
75 4B
76 4C
77 4D
78 4E
79 4F
80 50
81 51
82 52
83 53
84 54
85 55
86 56
87 57
88 58
89 59
90 5A
91 5B
92 5C
93 5D
94 5E
95 5F
96 60
97 61
98 62
99 63
100 64
101 65
102 66
103 67
104 68
105 69
106 6A
107 6B
108 6C
109 6D
110 6E
111 6F
112 70
113 71
114 72
115 73
116 74
117 75
118 76
119 77
120 78
121 79
122 7A
123 7B
124 7C
125 7D
126 7E
127 7F
128 80
129 81
130 82
131 83
132 84
133 85
134 86
135 87
136 88
137 89
138 8A
139 8B
140 8C
141 8D
142 8E
143 8F
144 90
145 91
146 92
147 93
148 94
149 95
150 96
151 97
152 98
153 99
154 9A
155 9B
156 9C
157 9D
158 9E
159 9F
160 A0
161 A1
162 A2
163 A3
164 A4
165 A5
166 A6
167 A7
168 A8
169 A9
170 AA
171 AB
172 AC
173 AD
174 AE
175 AF
176 B0
177 B1
178 B2
179 B3
180 B4
181 B5
182 B6
183 B7
184 B8
185 B9
186 BA
187 BB
188 BC
189 BD
190 BE
191 BF
192 C0
193 C1
194 C2
195 C3
196 C4
197 C5
198 C6
199 C7
200 C8
201 C9
202 CA
203 CB
204 CC
205 CD
206 CE
207 CF
208 D0
209 D1
210 D2
211 D3
212 D4
213 D5
214 D6
215 D7
216 D8
217 D9
218 DA
219 DB
220 DC
221 DD
222 DE
223 DF
224 E0
225 E1
226 E2
227 E3
228 E4
229 E5
230 E6
231 E7
232 E8
233 E9
234 EA
235 EB
236 EC
237 ED
238 EE
239 EF
240 F0
241 F1
242 F2
243 F3
244 F4
245 F5
246 F6
247 F7
248 F8
249 F9
250 FA
251 FB
252 FC
253 FD
254 FE
255 FF

 

 

分享到:
评论

相关推荐

    rgba的ie浏览器支持换算器

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

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

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

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

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

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

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

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

    RGB色彩模式(也翻译为“红绿蓝”,比较少用)是工业界的一种颜色标准,是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到...A参数,取值在0~1之间,不可为负值 RGBA语法: 复制代码代

    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属性。

    PIE.htc在IE8实现一些css3效果

    1.PIE.htc是一个可以解决IE6/7/8无法支持CSS3属性的文件,其利用VML绘制相关的效果。要注意的是它并不能实现所有CSS3效果,其兼容的属性有:box-radius,线性渐变( linear-gradient),rgba,box-shadow,border-image。...

    ie8-restrictions:IE 8 不能拥有的东西清单

    IE 8 不支持的内容以及解决其中一些问题的方法 我希望你永远不必参考这份文件(我们在 2015 年) 标记 语义HTML5元素,如article , aside , figcaption , figure , footer , header , nav , section等(但你...

    让IE 6,7,8支持CSS3的部分属性及htc的应用

    让IE 6,7,8支持CSS3的部分属性。今天要给大家介绍的这个htc,它可以让IE浏览器支持CSS3的border-radius、box-shadow、border-image、CSS3 Backgrounds (-pie-background)、Gradients、RGBA属性。不相信?你可以在IE...

    微信小程序 ---- 导航栏随滚动透明渐变

    该demo采用了opacity和background的rgba两种方法来实现导航栏随滚动透明渐变,但是需要注意的是不兼容IE8及以下的IE浏览器,原因:由于IE8及以下的透明度设置不支持CSS3的opacity属性和rgba颜色值!

    ie-toolbox:仅在必要时可以使用一些工具将我从旧的IE兼容问题中解救出来

    让 IE 6-9 支持 CSS3 里的 border-radius, box-shadow, rgba 颜色等特性。。 需引入一个 js 和神奇的 htc 文件。 让 IE 6-8 支付 CSS3 里 min/max-width 媒体查询特性。要求样式为移动端优先风格(mobile first)。只...

    f1-dom-oldify:该模块将采用 d1-dom 模块并将其“旧化”。 这意味着它将删除 css 转换并使用其他 css 方法

    较旧的 ie 浏览器不支持 rgba 背景颜色,因此 f1-dom-oldify 目前忽略颜色的 alpha。用法 该模块期望f1-dom成为对等依赖项,因此首先执行以下操作: $ npm i f1-dom --save$ npm i f1-dom-oldify --save然后在您的...

    CSS3.0中文参考手册

    7) RGBa - 加入透明色 RGBa 中的 a 代表透明色,透明对设计者来说非常主要,目前除了 IE,这一功能正在被广泛采用。 8) 文字阴影 也属于渐变色的概念,让文字拥有阴影,以前甚至不能通过图片背景实现,因此这将为...

    CSS实现背景透明文字不透明的可行方法(兼容各浏览器)

    而IE6/7/8浏览器不支持 rgba,只有使用IE的专属滤镜filter:Alpha来实现,但是这样写法会把文字也变为透明,因此只有在透明容器的子节点(文本节点除外)内设置 position:relative才能不继承其父元素的透明滤镜,代码...

    几个高级CSS属性技巧美化网站显示

    这个属性的兼容问题比较简单,IE8已经支持这个属性,IE6和IE7也可以通过hack支持。RGBA和CSS2里的RBG属性差不多,只是RGBA属性多了一个透明度的定义,CSS3标准里对RGBA属性的解释如下:在现实中,使用三个1~255的十...

    原生JS实现 MUI导航栏透明渐变效果

    首先声明:由于backgroundColor的值采用的是RGBA,IE8及以下不支持,所以此效果不支持IE8及以下的浏览器 css代码 body,p,h1{margin: 0;} .module-layer{ width: 100%; position: fixed; top: 0; left: 0; z-...

    CSS3基础(RGBa、text-shadow、box-shadow、border-radius)

    本文介绍CSS 3部分新属性基础,包括RGBa、text-shadow、box-shadow、border-radius。这些属性通常用来增强网页布局和美誉度。(译者注:在支持CSS3的浏览器如Firefox、Safari、IE9等可点击图片查看演示。)

Global site tag (gtag.js) - Google Analytics