线性渐变（linear-gradient）兼容到IE7

最新推荐文章于 2021-08-04 01:05:44 发布

混迹在开发队伍里的伪开发

最新推荐文章于 2021-08-04 01:05:44 发布

阅读量783

点赞数 1

分类专栏： css 文章标签：线性渐变

css 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

转自：https://blog.csdn.net/onepiece1991/article/details/80324739

效果：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p.horizontal {
            width: 200px;
            height: 40px;
            color: #FFF;
            line-height: 40px;
            text-align: center;
            background: -moz-linear-gradient(to right, #000, #f00);
            background: -ms-linear-gradient(to right, #000, #f00);
            background: -webkit-linear-gradient(to right, #000, #f00);
            background: linear-gradient(to right, #000, #f00);
            filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr="#000", endColorstr="#f00", gradientType="1");
        }
        p.vertical {
            width: 200px;
            height: 40px;
            color: #FFF;
            line-height: 40px;
            text-align: center;
            background: -moz-linear-gradient(#000, #f00);
            background: -ms-linear-gradient(#000, #f00);
            background: -webkit-linear-gradient(#000, #f00);
            background: linear-gradient(#000, #f00);
            filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr="#000", endColorstr="#f00", gradientType="0");
        }
    </style>
</head>
<body>
    <p class="horizontal">水平渐变</p>
    <p class="vertical">垂直渐变</p>
</body>
</html>

filter参数

startColorStr起始颜色
endColorStr结束颜色
gradientType为0时代表垂直，为1时代表水平

注意事项：

startColorstr可以加上透明度，如:”#550000FF”。数值如何计算下面会说
startColorstr必须写全，不能缩写成“#FFF”类似数值
filter只有在IE9及其以下浏览器才会生效

百分比换算十六进制透明度
十六进制颜色值，如透明值 #550000FF（#AARRGGBB）(#透明度红绿蓝)

Q：现在要设置某个控件背景颜色为60%透明度？
A：需要将60%换算成十六进制#AA这两位就可以了。因透明度总共有255阶，先计算#AA的十进制y(变量y)，公式如下：y/255=6/10，变化为y=6x255/10，然后把y换算成十六进制，等于7F 。

不透明度百分比—–十六进制

0% = 00（全透明）
5% = 0C
10% = 19
15% = 26
20% = 33
25% = 3F
30% = 4C
35% = 59
40% = 66
45% = 72
50% = 7F
55% = 8C
60% = 99
65% = A5
70% = B2
75% = BF
80% = CC
85% = D8
90% = E5
95% = F2
100% = FF（不透明）

混迹在开发队伍里的伪开发

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
线性渐变（linear-gradient）兼容到IE7

转自：https://blog.csdn.net/onepiece1991/article/details/80324739效果：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/tit
复制链接

扫一扫