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 border-radius属性详解
Jul 05 HTML / CSS
表单button的outline在firefox浏览器下的问题
Dec 24 HTML / CSS
CSS3支持IE6, 7, and 8的边框border属性
Dec 28 HTML / CSS
带有css3动画效果的兼容多浏览器简单导航条示例
Jan 26 HTML / CSS
浅谈HTML5 服务器推送事件(Server-sent Events)
Aug 01 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
Mar 21 HTML / CSS
HTML5中的Web Notification桌面右下角通知功能的实现
Apr 19 HTML / CSS
做一个能自适应高度的textarea的示例代码
Sep 06 HTML / CSS
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
Apr 07 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
Dec 01 HTML / CSS
利用html+css实现菜单栏缓慢下拉效果的示例代码
Mar 30 HTML / CSS
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
Apr 19 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接收POST数据方式
2015/06/05 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
laravel-admin解决表单select联动时,编辑默认没选上的问题
2019/09/30 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
js控制div及网页相关属性的代码
2009/12/19 Javascript
jquery 简单的进度条实现代码
2010/03/11 Javascript
javascript面向对象编程代码
2011/12/19 Javascript
Package.js  现代化的JavaScript项目make工具
2012/05/23 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
2013/11/18 Javascript
使用apply方法实现javascript中的对象继承
2013/12/16 Javascript
javasctipt如何显示几分钟前、几天前等
2014/04/30 Javascript
jquery对象和javascript对象即DOM对象相互转换
2014/08/07 Javascript
Javascript节点关系实例分析
2015/05/15 Javascript
基于js实现投票的实例代码
2015/08/04 Javascript
JS绘制微信小程序画布时钟
2016/12/24 Javascript
setTimeout学习小结
2017/02/08 Javascript
js上传图片预览的实现方法
2017/05/09 Javascript
利用vue和element-ui设置表格内容分页的实例
2018/03/02 Javascript
详解如何在Vue项目中导出Excel
2019/04/19 Javascript
[01:07]2015国际邀请赛 中国区预选赛精彩回顾
2015/06/15 DOTA
python基础教程之lambda表达式使用方法
2014/02/12 Python
python删除过期文件的方法
2015/05/29 Python
Python实现对象转换为xml的方法示例
2017/06/08 Python
Python爬虫获取整个站点中的所有外部链接代码示例
2017/12/26 Python
网易2016研发工程师编程题 奖学金(python)
2019/06/19 Python
django 中使用DateTime常用的时间查询方式
2019/12/03 Python
matplotlib.pyplot.plot()参数使用详解
2020/07/28 Python
详解如何使用Pytest进行自动化测试
2021/01/14 Python
FORZIERI澳大利亚站:全球顶级奢华配饰精品店
2016/12/31 全球购物
什么是表空间(tablespace)和系统表空间(System tablespace)
2013/02/25 面试题
财务支持类个人的自我评价
2014/02/14 职场文书
党的群众路线教育实践活动公开承诺书
2014/03/28 职场文书
2015年世界急救日宣传活动方案
2015/05/06 职场文书
Python中json.dumps()函数的使用解析
2021/05/17 Python
Java线程的6种状态与生命周期
2022/05/11 Java/Android
python高温预警数据获取实例
2022/07/23 Python