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实现炫酷的飞机起飞动画
Sep 17 HTML / CSS
CSS3的常见transformation图形变化用法小结
May 13 HTML / CSS
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
Dec 30 HTML / CSS
CSS3制作轮播图的一种方法
Nov 11 HTML / CSS
HTML5如何实现元素拖拽
Mar 11 HTML / CSS
html5版canvas自由拼图实例
Oct 15 HTML / CSS
HTML5实现获取地理位置信息并定位功能
Apr 25 HTML / CSS
使用纯HTML5编写一款网页上的时钟的代码分享
Nov 16 HTML / CSS
html5 postMessage解决跨域、跨窗口消息传递方案
Dec 20 HTML / CSS
HTML5 文件上传下载的实例代码
Jul 03 HTML / CSS
3种方式实现瀑布流布局小结
Sep 05 HTML / CSS
CSS精灵图的原理与使用方法介绍
Mar 17 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+AJAX实现无刷新注册(带用户名实时检测)
2007/01/02 PHP
php绘制一个矩形的方法
2015/01/24 PHP
PHP 根据key 给二维数组分组
2016/12/09 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
JavaScript中的Document文档对象
2008/01/16 Javascript
javascript window对象属性整理
2009/10/24 Javascript
Javascript获取CSS伪元素属性的实现代码
2014/09/28 Javascript
javascript实现类似超链接的效果
2014/12/26 Javascript
简单谈谈json跨域
2016/03/13 Javascript
JavaScript每天必学之基础知识
2016/09/17 Javascript
JavaScript学习笔记整理_关于表达式和语句
2016/09/19 Javascript
AngularJS入门教程之Helloworld示例
2016/12/25 Javascript
AngulaJS路由 ui-router 传参实例
2017/04/28 Javascript
node.js中express-session配置项详解
2017/05/31 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
2017/07/17 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
2017/12/16 jQuery
react实现换肤功能的示例代码
2018/08/14 Javascript
详解小程序不同页面之间通讯的解决方案
2018/11/23 Javascript
vue-cli创建的项目中的gitHooks原理解析
2020/02/14 Javascript
JavaScript异步操作的几种常见处理方法实例总结
2020/05/11 Javascript
[53:52]OG vs EG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
Python是编译运行的验证方法
2015/01/30 Python
centos6.4下python3.6.1安装教程
2017/07/21 Python
Python 多核并行计算的示例代码
2017/11/07 Python
python爬虫开发之urllib模块详细使用方法与实例全解
2020/03/09 Python
详解pycharm2020.1.1专业版安装指南(推荐)
2020/08/07 Python
解决python3中os.popen()出错的问题
2020/11/19 Python
HTML5等待加载动画效果
2017/07/27 HTML / CSS
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
2013/07/04 HTML / CSS
Java软件工程师综合面试题笔试题
2013/09/08 面试题
英文自荐信
2013/12/19 职场文书
班主任新年寄语
2014/04/04 职场文书
高中课程设置方案
2014/05/28 职场文书
物理教育专业求职信
2014/06/25 职场文书
2015年春训学习心得体会范文
2015/03/09 职场文书
拖欠货款起诉状
2015/05/20 职场文书