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 相关文章推荐
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
Dec 22 HTML / CSS
详解通过变换矩阵实现canvas的缩放功能
Jan 14 HTML / CSS
让IE支持HTML5的方法
Dec 11 HTML / CSS
HTML5 对各个标签的定义与规定:body的介绍
Jun 21 HTML / CSS
canvas使用注意点总结
Jul 19 HTML / CSS
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
Jun 23 HTML / CSS
推荐10个HTML5响应式框架
Feb 25 HTML / CSS
HTML5 source标签:媒介元素定义媒介资源
Jan 29 HTML / CSS
详解canvas绘图时遇到的跨域问题
Mar 22 HTML / CSS
手摸手教你用canvas实现给图片添加平铺水印的实现
Aug 20 HTML / CSS
HTML5自定义mp3播放器源码
Jan 06 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
Dec 04 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
Php获取金书网的书名的实现代码
2010/06/11 PHP
最新用php获取谷歌PR值算法,附上php查询PR值代码示例
2011/12/25 PHP
CI(CodeIgniter)框架中的增删改查操作
2014/06/10 PHP
PHP中cookie和session的区别实例分析
2014/08/28 PHP
codeigniter显示所有脚本执行时间的方法
2015/03/21 PHP
php使用cookie实现记住登录状态
2015/04/27 PHP
CI(CodeIgniter)模型用法实例分析
2016/01/20 PHP
PHP 获取 ping 时间的实现方法
2017/09/29 PHP
脚本之家贴图转换+转贴工具用到的js代码超级推荐
2007/04/05 Javascript
JS读取cookies信息(记录用户名)
2012/01/10 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
javascript实现动态加载CSS
2015/01/26 Javascript
js实现简洁的TAB滑动门效果代码
2015/09/06 Javascript
js简单设置与使用cookie的方法
2016/01/22 Javascript
浅谈jquery点击label触发2次的问题
2016/06/12 Javascript
JS中如何比较两个Json对象是否相等实例代码
2016/07/13 Javascript
javascript滚轮事件基础实例讲解(37)
2017/02/14 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
2017/08/31 Javascript
微信二次分享报错invalid signature问题及解决方法
2019/04/01 Javascript
微信jssdk踩坑之签名错误invalid signature
2020/05/19 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
2020/11/16 Javascript
Python中使用socket发送HTTP请求数据接收不完整问题解决方法
2015/02/04 Python
python win32 简单操作方法
2017/05/25 Python
python3 shelve模块的详解
2017/07/08 Python
Python学习_几种存取xls/xlsx文件的方法总结
2018/05/03 Python
使用Python在Windows下获取USB PID&VID的方法
2019/07/02 Python
解决Pytorch 训练与测试时爆显存(out of memory)的问题
2019/08/20 Python
python中dict()的高级用法实现
2019/11/13 Python
解决Keras中循环使用K.ctc_decode内存不释放的问题
2020/06/29 Python
Html5 localStorage入门教程
2018/04/26 HTML / CSS
如何使用canvas绘制可移动网格的示例代码
2020/12/14 HTML / CSS
财务会计人员求职的自我评价
2014/01/13 职场文书
综合实践活动方案
2014/02/14 职场文书
国际贸易毕业生求职信范文
2014/02/21 职场文书
教师查摆问题自查报告
2014/10/11 职场文书
严以律己专题学习研讨会发言材料
2015/11/09 职场文书