CSS3实现渐变背景兼容问题


Posted in HTML / CSS onMay 06, 2020

我们在做一个渐变背景颜色的时候会用到linear-gradient() 函数用于创建一个线性渐变的 "图像"。它是css3中的语法,最低兼容IE10

background-image: linear-gradient(to right, #ff9000, #ff5000);

direction:用于指定渐变方向。它可以接受一个表示角度的值(可用的单位deg、rad、grad或turn)或者是表示方向的关键词(top、right、bottom、left、left top、top right、bottom right或者left bottom)。

color-start, color-end:分别表示起始颜色和终止颜色

CSS3实现渐变背景兼容问题

这是淘宝网导航栏的一个例子,它的渐变色实现如下:

background-image: linear-gradient(to right, #ff9000, #ff5000);

但是,linear-gradient()最低兼容IE10,要兼容IE8和IE9的话只能使用filter替代,如下:

background-image: linear-gradient(to right, #ff9000, #ff5000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', 
endColorstr='#ffff5000', GradientType=1);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', 
endColorstr='#ffff5000', GradientType=1);

我们在使用filter实现渐变的时候要注意颜色的值不能填简写(如#000),一定要写完整,我们来看看#000和#000000的区别:

当为#000的时候

filter:progid:DXImageTransform.Microsoft.gradient
(startColorstr='#000',
 endColorstr='#ffff5000', 
GradientType=1)
;

执行结果:

CSS3实现渐变背景兼容问题

当为#000000的时候

filter:progid:
DXImageTransform.Microsoft.gradient
(startColorstr='#000000', 
endColorstr='#ffff5000', GradientType=1);

执行结果:

CSS3实现渐变背景兼容问题

接下来我们分析下filter里面值:

细心的小伙伴们可以看到filter里面的startColorstr和endColorstr颜色值多了两个ff,其实startColorstr和endColorstr并不是简单的代表颜色,它们的格式应该是 #AARRGGBB 。AA, RR, GG, BB 为十六进制正整数。取值范围为 00 - FF 。RR 指定红色值, GG 指定绿色值, BB 指定蓝色值。 AA 指定透明度。00 是完全透明。FF 是完全不透明。超出取值范围的值将被恢复为默认值。取值范围为#FF000000 - #FFFFFFFF 。AA跟我们之前学的rgba()中的a相似,都是设置透明度的。

GradientType=1表示方向,1表示水平方向,0表示垂直方向 

到此这篇关于CSS3实现渐变背景兼容问题的文章就介绍到这了,更多相关css3 渐变背景内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3模块的目前的状况分析
Feb 24 HTML / CSS
CSS3盒子模型详解
Apr 24 HTML / CSS
纯HTML+CSS3制作导航菜单(附源码)
Apr 24 HTML / CSS
HTML5中使用postMessage实现Ajax跨域请求的方法
Apr 19 HTML / CSS
HTML5拖放功能_动力节点Java学院整理
Jul 13 HTML / CSS
W3C公布最新的HTML5标准草案
Oct 17 HTML / CSS
HTML5 声明兼容IE的写法
May 16 HTML / CSS
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
Dec 07 HTML / CSS
HTML5本地存储之Database Storage应用介绍
Jan 06 HTML / CSS
html5利用canvas实现颜色容差抠图功能
Dec 23 HTML / CSS
HTML5给汉字加拼音收起展开组件的实现代码
Apr 08 HTML / CSS
css实现左上角飘带效果的完整代码
Mar 18 HTML / CSS
通过css3的filter滤镜改变png图片的颜色的示例代码
May 06 #HTML / CSS
基于ccs3的timeline时间线实现方法
Apr 30 #HTML / CSS
CSS3实现div从下往上滑入滑出效果示例
Apr 28 #HTML / CSS
深入浅析CSS3中的Flex布局整理
Apr 27 #HTML / CSS
纯CSS3实现移动端展开和收起效果的示例代码
Apr 26 #HTML / CSS
CSS实现聊天气泡效果
Apr 26 #HTML / CSS
css3 实现元素弧线运动的示例代码
Apr 24 #HTML / CSS
You might like
给多个地址发邮件的类
2006/10/09 PHP
php实现快速排序的三种方法分享
2014/03/12 PHP
ThinkPHP模板判断输出Present标签用法详解
2014/06/30 PHP
PHP实现的连贯操作、链式操作实例
2014/07/08 PHP
php+xml结合Ajax实现点赞功能完整实例
2015/01/30 PHP
PHP实现找出有序数组中绝对值最小的数算法分析
2017/08/07 PHP
如何修改Laravel中url()函数生成URL的根地址
2017/08/11 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
使两个iframe的高度与内容自适应,且相等
2006/11/20 Javascript
Javascript中Eval函数的使用说明
2008/10/11 Javascript
php is_numberic函数造成的SQL注入漏洞
2014/03/10 Javascript
javascript 小数取整简单实现方式
2014/05/30 Javascript
Js实现无刷新删除内容
2015/04/29 Javascript
JavaScript模块化开发之SeaJS
2015/12/13 Javascript
BootStrap glyphicons 字体图标实现方法
2016/05/01 Javascript
分享10个优化代码的CSS和JavaScript工具
2016/05/11 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
2016/10/30 Javascript
快速将Vue项目升级到webpack3的方法步骤
2017/09/14 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
2017/12/04 Javascript
JavaScript实用代码小技巧
2018/08/23 Javascript
微信小程序基于高德地图查找位置并显示文字
2019/10/30 Javascript
Python中logging模块的用法实例
2014/09/29 Python
Puppeteer使用示例详解
2019/06/20 Python
Django 后台获取文件列表 InMemoryUploadedFile的例子
2019/08/07 Python
Python基于QQ邮箱实现SSL发送
2020/04/26 Python
python入门:argparse浅析 nargs='+'作用
2020/07/12 Python
python 写一个性能测试工具(一)
2020/10/24 Python
德国柯吉澳趣味家居:Koziol
2017/08/24 全球购物
优秀团员个人的自我评价
2013/10/02 职场文书
珠宝店促销方案
2014/03/21 职场文书
校园活动宣传方案
2014/03/28 职场文书
一般党员对照检查材料
2014/09/24 职场文书
领导班子四风问题对照检查材料
2014/09/27 职场文书
关于运动会的广播稿
2015/08/19 职场文书
关于React Native使用axios进行网络请求的方法
2021/08/02 Javascript
Python中requests库的用法详解
2022/06/05 Python