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自定义滚动条样式写法
Dec 25 HTML / CSS
在HTML5中如何使用CSS建立不可选的文字
Oct 17 HTML / CSS
CSS实现雨滴动画效果的实例代码
Oct 08 HTML / CSS
CSS3实现缺角矩形,折角矩形以及缺角边框
Dec 20 HTML / CSS
html5 input元素新特性_动力节点Java学院整理
Jul 06 HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
Jul 02 HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
Dec 13 HTML / CSS
HTML5新特性之用SVG绘制微信logo
Feb 03 HTML / CSS
使用HTML5 Canvas API控制字体的显示与渲染的方法
Mar 24 HTML / CSS
用position:sticky完美解决小程序吸顶问题的实现方法
Apr 24 HTML / CSS
HTML5简单实现添加背景音乐的几种方法
May 12 HTML / CSS
使用CSS连接数据库的方式
Feb 28 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 JSON中文乱码的解决方法详解
2013/06/06 PHP
如何利用http协议发布博客园博文评论
2015/08/03 PHP
PHP session会话操作技巧小结
2016/09/27 PHP
Zend Framework入门教程之Zend_Session会话操作详解
2016/12/08 PHP
在网页中控制wmplayer播放器
2006/07/01 Javascript
javascript SocialHistory 检查访问者是否访问过某站点
2008/08/02 Javascript
为JavaScript类型增加方法的实现代码(增加功能)
2011/12/29 Javascript
LABjs、RequireJS、SeaJS的区别
2014/03/04 Javascript
关于img的href和src取变量及赋值的方法
2014/04/28 Javascript
confirm的用法示例用于按钮操作时确定是否执行
2014/06/19 Javascript
详解JavaScript中的forEach()方法的使用
2015/06/08 Javascript
js实现圆盘记速表
2015/08/03 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
2016/06/07 Javascript
js 获取经纬度的实现方法
2016/06/20 Javascript
微信小程序之绑定点击事件实例详解
2017/07/07 Javascript
详解使用nvm安装node.js
2017/07/18 Javascript
prototype.js简单实现ajax功能示例
2017/10/18 Javascript
vue登录路由验证的实现
2017/12/13 Javascript
ES6 系列之 Generator 的自动执行的方法示例
2018/10/19 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
2019/09/28 Javascript
[13:18]《一刀刀一天》之DOTA全时刻21:详解TI新赛制 A队再露獠牙
2014/06/24 DOTA
[33:23]VG vs Pain 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python urllib、urllib2、httplib抓取网页代码实例
2015/05/09 Python
Python实现的维尼吉亚密码算法示例
2018/04/12 Python
解决Spyder中图片显示太小的问题
2018/04/27 Python
使用Django2快速开发Web项目的详细步骤
2019/01/06 Python
python创建与遍历List二维列表的方法
2019/08/16 Python
如何使用Cython对python代码进行加密
2020/07/08 Python
python中HTMLParser模块知识点总结
2021/01/25 Python
预订旅游活动、景点和旅游:GetYourGuide
2019/09/29 全球购物
房屋公证委托书
2014/04/03 职场文书
《大作家的小老师》教学反思
2014/04/16 职场文书
提拔干部考察材料
2014/05/26 职场文书
为了顺利买到演唱会的票用Python制作了自动抢票的脚本
2021/10/16 Python
Linux中如何安装并部署Redis
2022/04/18 Servers