gradient渐变IE兼容处理
根据caniuse(http://caniuse.com/#search=gradient),gradient兼容性为IE10以及以上浏览器。
实例代码:
1 <!doctype html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8" /> 6 <title>gradient 兼容性处理</title> 7 <style type="text/css"> 8 * { 9 margin: 0; 10 padding: 0; 11 } 12 13 .parent {14 width: 400px; 15 height: 400px; 16 margin: 100px; 17 font-size: 20px; 18 color: #FF0000; 19 border: 1px solid red; 20 background: #000000; 21 background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%); 22 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff)); 23 background: -webkit-linear-gradient(top, #000000 0%, #ffffff 100%); 24 background: -o-linear-gradient(top, #000000 0%, #ffffff 100%); 25 background: -ms-linear-gradient(top, #000000 0%, #ffffff 100%); 26 background: linear-gradient(to bottom, #000000 0%, #ffffff 100%); 27 } 28 </style> 29 </head> 30 31 <body> 32 <div class="parent"> 33 </div> 34 </body> 35 36 </html>
chrome浏览器效果:
IE8浏览器效果(无渐变):
gradient兼容性处理:
1 .parent { 2 width: 400px; 3 height: 400px; 4 margin: 100px; 5 font-size: 20px; 6 color: #FF0000; 7 border: 1px solid red; 8 background: #000000; 9 background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%); 10 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff)); 11 background: -webkit-linear-gradient(top, #000000 0%, #ffffff 100%); 12 background: -o-linear-gradient(top, #000000 0%, #ffffff 100%); 13 background: -ms-linear-gradient(top, #000000 0%, #ffffff 100%); 14 background: linear-gradient(to bottom, #000000 0%, #ffffff 100%); 15 /*关键属性设置*/ 16 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff', GradientType=0); 17 }
设置filter属性目的是上一行的透明度不起作用的时候执行,filter: progid:DXImageTransform.Microsoft.gradient是用来做渐变的,GradientType:可读写,设置或检索色彩渐变的方向:
1:默认值。水平渐变。
0:垂直渐变。
总结:至此完成IE9以及以下IE浏览器gradient兼容性处理。
gradient渐变IE兼容处理相关推荐
- html渐变不兼容,CSS实现兼容性的渐变背景(gradient)效果兼容众多浏览器
一.有点俗态的开场白 要是两年前,实现"兼容性的渐变效果"这个说法估计不会被提出来的,那个时候,说起渐变背景,想到的多半是IE的渐变滤镜,其他浏览器尚未支持,但是,在对CSS3支持 ...
- CSS -- 实现DIV层背景颜色渐变 (兼容IE 火狐 谷歌浏览器)
CSS -- 实现DIV层背景颜色渐变 (兼容IE 火狐 谷歌浏览器) FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType= ...
- css实现文字渐变并兼容IE浏览器
css实现文字渐变并兼容IE浏览器 css文字渐变写法 color: #fff; background: linear-gradient(to bottom, #fff5b9, #f3d380); - ...
- 「SwiftUI」Gradient渐变颜色填充效果
iOS 使用渐变色进行填充 这需要使用到Gradient渐变器来实现颜色的渐变变化 常用的有两种:颜色线性变化,径向发散变化 1.线性变化 效果如图: ps:因颜色有重合部分,所以会生成新的颜色,使用 ...
- ie6+7+8等对background-color:rgba(),background-img渐变的兼容
一,ie8兼容rgba()的解决办法 今天遇到了一个问题,要在一个页面中设置一个半透明的白色div.这个貌似不是难题,只需要给这个div设置如下的属性即可: background: rgba(255, ...
- gradient 渐变
看了大漠 写的关于 Gradient 的文章,我也想写点以便加深记忆. 首先gradient 分为linear-gradient (线性渐变) 和 radial-gradient(径向渐变),渐变是作 ...
- ie 9 渐变背景色兼容问题
/*窗口背景*/ .window { background-color: #fff; background: -webkit-linear-gradient(top,#EFF5FF ...
- CSS3 Gradient渐变
CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). http://www.w3cplus.com/content/css3-grad ...
- 【Android UI】Paint Gradient 渐变渲染 ① ( LinearGradient 线性渐变渲染 | 设置渲染方向 | 设置渲染颜色 | 设置渲染模式 | MIRROR )
文章目录 一.LinearGradient 线性渐变渲染 1.设置 2 个颜色的渐变 3.设置多个颜色的渐变 二.LinearGradient 线性渐变渲染重要参数分析 1.正常渲染 2.设置多个渐变 ...
最新文章
- 自制操作系统Antz day08——实现内核 (中) 扩展内核
- 微信小程序学习日记day1
- 九种跨域方式实现原理
- jquery 获取键值对中最大值_jquery属性的操作
- html5内联框去滚动条,如何优雅的实现内联滚动条(前端底部固定方法 )
- 【Java】开源工具 Hutool 不糊涂
- 计算机论文的致谢部分写什么,毕业论文致谢部分怎么写-论文致谢部分如何写在线等请问毕业论文最后一部分致谢要怎么写呀. 爱问知识人...
- android.app.instrumentation解析
- 文本生成系列之transformer结构扩展(二)
- shell中txt转EXCEL
- Linux内核模块编程
- Navicat Premium 12.0.29中文版64位+破解补丁
- 计算机控制技术毕业论文题目,计算机控制方面论文选题 计算机控制论文题目怎样定...
- PMP 考点 第七章 项目成本管理
- 三星固态Dell版的960g的sm863a硬盘
- wword中如何在方框(□)中打钩(√)
- 学编程要学好英语吗?
- 浙大 计算机 设计学 考研科目,2020浙江大学软件工程考研参考书目
- 程序员走进偶像剧变身男主,网友:我服!
- R语言当前文件工作路径