IE浏览器下的渐变背景
background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);(标准) linear-gradient 在 ie9 以下是不支持的,所以对于 ie6 - ie8 我们可以使用滤镜来解决。如下代码:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#000,endColorstr=#fFF,GradientType=0);
:root {filter:none;}(需要针对 ie9 单独处理滤镜效果)
gradientType=1代表横向渐变
gradientType=0代表纵向淅变。 上面的代码没有透明度变化,如果需要透明度还是使用滤镜
filter:alpha(opacity=100 finishopacity=0 style=1 startx=0,starty=5,finishx=90,finishy=60)
(1)opacity表示透明度,默认的范围是从0 到 100,他们其实是百分比的形式。0为完全透明 100不透明
(2)finishopacity 是一个可选参数,如果想要设置渐变的透明效果,就可以使用他们来指定结束时的透明度。范围也是0 到 100。
(3)style用来指定透明区域的形状特征:
0 代表统一形状
1 代表线形
2 代表放射状
3 代表矩形
(4)startx 渐变透明效果开始处的 X坐标
starty 渐变透明效果开始处的 Y坐标
(5)finishx 渐变透明效果结束处的 X坐标
finishy 渐变透明效果结束处的 Y坐标 例子:ie下的透明度背景色
filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150)
progid:DXImageTransform.Microsoft.gradient(startcolorstr=#000,endcolorstr=fff,gradientType=0);
IE浏览器下的渐变背景的更多相关文章
- CSS实现兼容性的渐变背景(gradient)效果
利用css 3实现渐变可以很方便的更改它的颜色,并且能够减少图片的制作,但是它的兼容性并不好,下面的代码就是实现利用css 渐变兼容的代码: .gradient{ width:300px; heigh ...
- 【转】CSS实现兼容性的渐变背景(gradient)效果
一.有点俗态的开场白 要是两年前,实现“兼容性的渐变效果”这个说法估计不会被提出来的,那个时候,说起渐变背景,想到的多半是IE的渐变滤镜,其他浏览器尚未支持,但是,在对CSS3支持日趋完善的今天,实现 ...
- 第161天:CSS3实现兼容性的渐变背景(gradient)效果
CSS实现兼容性的渐变背景(gradient)效果 一.有点俗态的开场白 在对CSS3支持日趋完善的今天,实现兼容性的渐变背景效果已经完全成为可能,本文就将展示如何实现兼容性的渐变背景效果.在众多的浏 ...
- CSS gradient渐变之webkit核心浏览器下的使用
一.关于渐变 渐变是一种应用于平面的视觉效果,可以从一种颜色逐渐地转变成另外一种颜色,故可以创建类似于彩虹的效果渐变可以应用在任何可以使用图片的地方.例如,您可以指定一个这么一个渐变:顶部的颜色是红色 ...
- CSS gradient渐变之webkit核心浏览器下的使用以及实例
一.关于渐变 渐变是一种应用于平面的视觉效果,可以从一种颜色逐渐地转变成另外一种颜色,故可以创建类似于彩虹的效果渐变可以应用在任何可以使用图片的地方.例如,您可以指定一个这么一个渐变:顶部的颜色是红色 ...
- Chrome浏览器下自动填充的输入框背景
记录下从张鑫旭老师的微博中看到关于input输入框的属性 1.autocomplete="off" autocomplete 属性规定输入字段是否应该启用自动完成功能 自动完成允许 ...
- 渐变背景(background)效果
chrom and Safari浏览器: webkit核心的浏览器.使用CSS3渐变方法(css-gradient) -webkit-gradient(type, start_point, end_p ...
- CSS3下的渐变文字效果实现
如下,第一种方法已实践 一.方法一:借助mask-image属性 可以狠狠地点击这里:CSS3下的渐变文字效果方法一demo 如果您手头上的浏览器是Chrome或是Safari,则您可以在demo页面 ...
- 小tip:CSS3下的渐变文字效果实现——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1601 一.方法一:借 ...
随机推荐
- css3中的display:-webkit-box的用法
一. css weui-media-box__desc { color: #999999; font-size: 13px; line-height: 1.2; overflow: hidden; t ...
- 单选框radio总结(获取值、设置默认选中值、样式)
单选框 radio <div class="radio-inline"> <input type="radio" name="kil ...
- SVN:Access to 'xxx' forbidden
可以做以下尝试:
- abp 后台项目在IIS 中运行
安装 Current .NET Core Hosting Bundle installer (direct download)
- poj3417 Network 树上差分+LCA
题目传送门 题目大意:给出一棵树,再给出m条非树边,先割掉一条树边,再割掉一条非树边,问有几种割法,使图变成两部分. 思路:每一条 非树边会和一部分的树边形成一个环,分三种情况: 对于那些没有形成环的 ...
- Codeforces - 185A 简单矩阵快速幂
题意:求第n个三角形内部的上三角形个数 对每个三角形分别维护上下三角形个数,记为\(dp[1][i],dp[2][i]\) 规律很明显是 \(dp[1][i+1]=3*dp[1][i]+dp[2][i ...
- SPOJ - MAXXOR
依然是异或运算,这次是限制L,R范围内挑2个数使其异或值最大 如果r最高为是pos,那最理想状态当然是(1ll<<pos+1)-1 只有2个数如果凑近最理想的状态?直接找紧挨着的一个就好, ...
- 日志统计--蓝桥杯--vector
/* 标题:日志统计 小明维护着一个程序员论坛.现在他收集了一份"点赞"日志,日志共有N行.其中每一行的格式是: ts id 表示在ts时刻编号id的帖子收到一个"赞&q ...
- mysql远程连接详细配置
2018-11-06 CentOS 配置MySQL允许远程登录 Mysql为了安全性,在默认情况下用户只允许在本地登录,可是在有此情况下,还是需要使用用户进行远程连接,因此为了使其可以远程需要进行如下 ...
- PIE SDK大气校正
1. 算法功能简介 大气校正的目的消除大气对太阳和来自目标的辐射产生吸收和散射作用的 影响,从而获得目标反射率.辐射率.地表温度等真实物理模型参数.大多数情 况下,大气校正同时也是反演地物真实反射率的 ...