zoukankan      html  css  js  c++  java
  • ie8不兼容rgba的解决

    借鉴。。。。。。。。。。。。。。。。。

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

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

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

    Html代码  收藏代码
    1. <div style="height:100px;100px;rgba(196, 50, 61,0.7)"></div>  

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

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

    Html代码  收藏代码
    1. <div style="height:100px;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
  • 相关阅读:
    关于键盘事件对象code值
    解决父元素定位后宽度不随着子元素增大而增大的问题
    绝对定位后元素的宽高如果用百分比表示的计算方法
    4.7做作业时发现,内联元素设置宽高背景以后正常不显示,但是设置了position:absolute;以后就可以显示了。起到了和display:block;一样的效果。然后查了一下知道了。
    react-native中显示本地照片或视频
    用js实现div元素的拖拽、
    TCP协议浅谈
    TCP的三次握手和四次挥手
    TCP协议
    关于this指向的一点小分享
  • 原文地址:https://www.cnblogs.com/guofei0925/p/6054115.html
Copyright © 2011-2022 走看看