`
moneyinto
  • 浏览: 33311 次
  • 性别: 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,但通过滤镜技术可以实现类似的效果。理解并掌握这些技巧对于确保网站在各种浏览器上的兼容性和视觉一致性至关重要。同时,随着现代浏览器的广泛使用,RGBa和其他CSS3特性已成为...

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

    这个技巧是解决IE8不支持rgba()的一个常见方法,它允许我们在保持对新浏览器的先进功能支持的同时,也能确保旧版浏览器的兼容性。不过,随着现代浏览器的普及,这种方法逐渐被新的前缀技术和渐进增强策略所取代。但...

    让IE6、IE7、IE8支持CSS3的圆角、阴影样式

    下面我们将详细探讨如何让这些旧版IE支持CSS3的圆角和阴影样式。 首先,让我们来了解CSS3中的圆角和阴影效果。在CSS3中,`border-radius`属性用于创建圆角效果,它可以分别设置四个角的圆角半径,或者用简写形式一...

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

    由于IE6到IE8不支持使用百分比形式的RGBA,所以需要一些技巧来实现兼容。以下是两种常见的解决方案: 1. **CSSPIE (CSS3 Pie)**: 这是一个JavaScript库,它可以扩展IE浏览器对CSS3属性的支持,包括RGBA。通过添加`-...

    ie 6 ie7 ie8 支持css3

    标题中的“ie 6 ie7 ie8 支持css3”指的是如何使老旧的Internet Explorer(IE)浏览器,包括版本6、7和8,能够支持CSS3的新特性。CSS3是层叠样式表的第三个主要版本,引入了大量增强网页设计的新功能,如圆角、阴影...

    bootstrap-ie8_ie9.rar

    但在IE8和IE9中,由于对媒体查询的支持有限,以及对某些CSS3属性的不完全支持,会导致栅格系统的显示异常,如列宽计算错误、布局错乱等。 压缩包中的"bootstrap-ie8_ie9"文件可能包含以下内容: 1. ** Respond.js ...

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

    在早期的Internet Explorer(IE)浏览器版本中,不支持CSS3中的`rgba()`函数,该函数用于定义具有透明度的背景颜色。`rgba()`语法允许指定一个颜色(红、绿、蓝通道)以及一个介于0(完全透明)和1(完全不透明)...

    垂直居中ie8+

    在IE8+支持CSS的多种方法,使得开发者能够灵活地处理不同场景下的垂直居中问题。下面我们将详细探讨几种主要的垂直居中技术及其应用。 1. **表格布局(Table-Cell Display)** 使用CSS的`display`属性设置为`table...

    RGBa色彩的浏览器支持分析

    对于不支持RGBa的浏览器,可以使用渐变滤镜或纯色作为回退方案,同时利用条件注释来针对特定的IE版本进行优化。随着技术的进步,越来越多的浏览器开始支持这种先进的颜色表示方式,使得Web设计的视觉效果更加丰富...

    CSS通过RGBa将一个元素设置为透明效果

    对于IE浏览器,由于它不支持RGBa,可以使用IE特有的滤镜来实现透明效果。条件注释是一种只在IE浏览器下执行的特殊注释方式。可以通过这种方式为IE浏览器提供一个透明效果的滤镜代码: ```html &lt;!--[if IE]&gt; .color...

    CSS3的RGBA中关于整数和百分比值的转换

    在过去的版本中,尤其是Internet Explorer(IE)和较早的Opera浏览器,它们可能不支持RGBA。为了确保跨浏览器的兼容性,可以使用一种叫做“渐进增强”或“适度降级”的策略。例如,可以先定义一个所有浏览器都理解的...

    ie 下png 透明图片 兼容解决方案

    4. **使用CSS3的`rgba()`颜色表示法**:尽管IE8及以上版本支持此方法,但IE6和7不支持。`rgba()`允许指定颜色的透明度,但不适用于IE6以下版本。 5. **GIF替代法**:对于简单的透明效果,可以考虑将PNG替换为支持...

    纯CSS的下拉菜单,支持IE6,IE7,Firefox

    由于IE6和IE7不支持某些CSS特性,如`:hover`伪类应用到非`&lt;a&gt;`元素上,所以我们需要进行一些调整。可以使用JavaScript或jQuery来解决这个问题,但这里我们只使用CSS。 1. 对于IE6和IE7,我们可以使用`&lt;a&gt;`元素包裹...

    rgba alpha 透明度的转换计算表

    需要注意的是,虽然现代浏览器都支持RGBA透明度属性,但在IE浏览器早期版本中(如IE8及以下),开发者仍然需要使用filter属性来实现透明效果。本文档的转换计算表正是为了解决这一历史兼容性问题而提供的。随着IE...

    html IE兼容问题

    5. 颜色和字体:IE6不支持`rgba()`颜色和`@font-face`字体引入,需要使用`hex`颜色和`png`透明图片,或者采用`filter`滤镜处理。 二、解决方案 1. 使用条件注释:通过HTML的条件注释,针对不同版本的IE应用不同的...

    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。...

Global site tag (gtag.js) - Google Analytics