css样式实现背景色的渐变效果及兼容性

最新推荐文章于 2024-09-22 09:02:33 发布

原创最新推荐文章于 2024-09-22 09:02:33 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

48 篇文章

订阅专栏

    <td height="50" colspan="3" valign="buttom" align="right" style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=#38036eb8,endColorStr=#388fc31f); background: linear-gradient(to right, rgba(3,110,184,0.22) 0%,rgba(143,195,31,0.22) 100%)">

</pre><pre code_snippet_id="495312" snippet_file_name="blog_20141024_10_1947537" name="code" class="html">

上述代码实现了：从左到右的颜色的渐变的效果。

background: linear-gradient(to right, rgba(3,110,184,0.22) 0%,rgba(143,195,31,0.22) 100%)

是chrome的实现效果

filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=#38036eb8,endColorStr=#388fc31f)

是ie下实现效果

DXImageTransform.microsoft.gradient

参数的说明以及计算方法：

gradienttype 。。。。。。。方向 1：左右 0：上下

startColorStr。。。。。。。开始颜色值，参数值是#AARRGGBB形式的，其中的AA是代表不透明度的十六进制，00表示完全透明，FF就是全不透明，化成十进制的范围就是0~255，剩下的RRGGBB就是颜色的十六进制代码，例如 rgba(3,110,184,0.22) 转换后是 #38036eb8，【特别说明】AA的计算公式： 0.22 * 255 大约是56 再转成16进制是38

endColorStr。。。。。。。结束颜色值，计算方法见上