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

最新推荐文章于 2024-09-05 21:30:35 发布

金牌战五渣

最新推荐文章于 2024-09-05 21:30:35 发布

阅读量3.6k

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/onepiece1991/article/details/80324739

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

效果展示
代码

<p class="horizontal">水平渐变</p>
<p class="vertical">垂直渐变</p>
<style>
p.horizontal {
    margin: 20px;
    width: 200px;
    height: 40px;
    font-size: 16px;
    color: #FFF;
    line-height: 40px;
    text-align: center;
    background: -moz-linear-gradient(to right, #11C3F9, #72C472);
    background: -ms-linear-gradient(to right, #11C3F9, #72C472);
    background: -webkit-linear-gradient(to right, #11C3F9, #72C472);
    background: linear-gradient(to right, #11C3F9, #72C472);
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr="#11C3F9", endColorstr="#72C472", gradientType="1");
}
p.vertical {
    margin: 20px;
    width: 200px;
    height: 40px;
    font-size: 16px;
    color: #FFF;
    line-height: 40px;
    text-align: center;
    background: -moz-linear-gradient(#11C3F9, #72C472);
    background: -ms-linear-gradient(#11C3F9, #72C472);
    background: -webkit-linear-gradient(#11C3F9, #72C472);
    background: linear-gradient(#11C3F9, #72C472);
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr="#11C3F9", endColorstr="#72C472", gradientType="0");
}
</style>

filter参数
1. startColorStr起始颜色
2. endColorStr结束颜色
3. gradientType为0时代表垂直，为1时代表水平

注意事项：
1. startColorstr可以加上透明度，如:”#550000FF”。数值如何计算下面会说
2. startColorstr必须写全，不能缩写成“#FFF”类似数值
3. 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（不透明）