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圆角边框制作代码
Nov 18 HTML / CSS
纯css3实现宠物小鸡实例代码
Oct 08 HTML / CSS
10种CSS3实现的loading动画,挑一个走吧?
Nov 16 HTML / CSS
HTML5新表单元素_动力节点Java学院整理
Jul 12 HTML / CSS
html5中localStorage本地存储的简单使用
Jun 16 HTML / CSS
使用Html5实现异步上传文件,支持跨域,带有上传进度条
Sep 17 HTML / CSS
浅谈HTML5 服务器推送事件(Server-sent Events)
Aug 01 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
Dec 04 HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
Jan 18 HTML / CSS
HTML5拖放API实现自动生成相框功能
Apr 07 HTML / CSS
钉钉企业内部H5微应用开发详解
May 12 HTML / CSS
详解CSS开发过程中的20个快速提升技巧
May 21 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
第二节 对象模型 [2]
2006/10/09 PHP
介绍一些PHP判断变量的函数
2012/04/24 PHP
php实现用于计算执行时间的类实例
2015/04/18 PHP
利用PHP绘图函数实现简单验证码功能的方法
2016/10/18 PHP
PHP实现Session入库/存入redis的方法
2017/05/04 PHP
Javascript类库的顶层对象名用户体验分析
2010/10/24 Javascript
validator验证控件使用代码
2010/11/23 Javascript
JS弹出对话框返回值代码(asp.net后台)
2010/12/28 Javascript
使用CSS样式position:fixed水平滚动的方法
2014/02/19 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
2014/05/13 Javascript
jquery 新建的元素事件绑定问题解决方案
2014/06/12 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
2015/06/04 Javascript
在for循环中length值是否需要缓存
2015/07/27 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
2015/11/04 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
2016/07/20 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
2018/01/08 Javascript
Vue-router 切换组件页面时进入进出动画方法
2018/09/01 Javascript
Preload基础使用方法详解
2020/02/03 Javascript
Python实现读取目录所有文件的文件名并保存到txt文件代码
2014/11/22 Python
python中迭代器(iterator)用法实例分析
2015/04/29 Python
简单的Apache+FastCGI+Django配置指南
2015/07/22 Python
基于Python 的进程管理工具supervisor使用指南
2016/09/18 Python
Python实现自定义函数的5种常见形式分析
2018/06/16 Python
基于Python中求和函数sum的用法详解
2018/06/28 Python
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
pycharm远程开发项目的实现步骤
2019/01/20 Python
对tensorflow 中tile函数的使用详解
2020/02/07 Python
加拿大健康、婴儿和美容产品在线购物:Well.ca
2016/11/30 全球购物
团日活动总结书
2014/05/08 职场文书
学用政策心得体会
2014/09/10 职场文书
计生办班子群众路线教育实践活动个人对照检查材料思想汇报
2014/10/04 职场文书
小学运动会入场词
2015/07/18 职场文书
关于远足的感想
2015/08/10 职场文书
nginx内存池源码解析
2021/11/20 Servers
Python装饰器详细介绍
2022/03/25 Python
nginx lua 操作 mysql
2022/05/15 Servers