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实现图片遮罩效果代码
Apr 09 HTML / CSS
css3给背景图片加颜色遮罩的方法
Nov 05 HTML / CSS
HTML5 canvas基本绘图之绘制矩形
Jun 27 HTML / CSS
html5+css3实现一款注册表单实例
Apr 17 HTML / CSS
整理HTML5中支持的URL编码与字符编码
Feb 23 HTML / CSS
HTML5 画布canvas使用方法
Mar 18 HTML / CSS
HTML5中的Web Notification桌面右下角通知功能的实现
Apr 19 HTML / CSS
canvas像素点操作之视频绿幕抠图
Sep 11 HTML / CSS
HTML实现代码雨源码及效果示例
Feb 25 HTML / CSS
简单实现一个手持弹幕功能+文字抖动特效
Mar 31 HTML / CSS
HTML+CSS实现导航条下拉菜单的示例代码
Aug 02 HTML / CSS
html,css,javascript是怎样变成页面的
May 07 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 变量类型的强制转换
2009/10/23 PHP
php开发过程中关于继承的使用方法分享
2011/06/17 PHP
php结合ajax实现赞、顶、踩功能实例
2014/05/12 PHP
php不使用copy()函数复制文件的方法
2015/03/13 PHP
MacOS 安装 PHP的图片裁剪扩展Tclip
2015/03/25 PHP
PHP版本如何选择?应该使用哪个版本?
2015/05/13 PHP
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
2010/03/16 Javascript
jQuery Selector选择器小结
2010/05/06 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
2010/11/19 Javascript
JavaScript在XHTML中的用法详解
2013/04/11 Javascript
jQuery根据纬度经度查看地图处理程序
2013/05/08 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
2014/04/03 Javascript
浅谈jquery中delegate()与live()
2015/06/22 Javascript
jQuery与getJson结合的用法实例
2015/08/07 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
2015/11/24 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
2015/11/29 Javascript
JS 拼凑字符串的简单实例
2016/09/02 Javascript
VUE中v-model和v-for指令详解
2017/06/23 Javascript
ES6/JavaScript使用技巧分享
2017/12/14 Javascript
Postman的下载及安装教程详解
2018/10/16 Javascript
基于React Native 0.52实现轮播图效果
2020/08/25 Javascript
electron踩坑之remote of undefined的解决
2020/10/06 Javascript
[49:54]Ti4 循环赛第三日 LGD vs Titan
2014/07/12 DOTA
[00:31]DOTA2荣耀之路7:Miracle-空血无敌斩
2018/05/31 DOTA
Python切片操作实例分析
2018/03/16 Python
Python3使用pandas模块读写excel操作示例
2018/07/03 Python
Django集成celery发送异步邮件实例
2019/12/17 Python
Python3实现英文字母转换哥特式字体实例代码
2020/09/01 Python
详解python tkinter 图片插入问题
2020/09/03 Python
西班牙电子产品购物网站:Electronicamente
2018/07/26 全球购物
承德避暑山庄导游词
2015/02/03 职场文书
幼儿园父亲节活动总结
2015/02/12 职场文书
超强台风观后感
2015/06/09 职场文书
为自己工作观后感
2015/06/11 职场文书
Python数据类型最全知识总结
2021/05/31 Python
详解Vue router路由
2021/11/20 Vue.js