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 一.方法一:借 ...
随机推荐
- 修复win10无法双击打开txt文档.reg
Windows Registry Editor Version 5.00[HKEY_CLASSES_ROOT\.txt]@="txtfile""Content Type& ...
- js 简单数据类型和复杂数据类型的区别
原始数据类型: number,string,boolean,undefined, null,object 基本类型(简单类型),值类型: number,string,boolean 复杂类型(引用类型 ...
- 黑马学习CSS之CSS模块化规范全部组成 CSS属性列表
- mysql ibdata 单独存储
简介ibdata1 ibdata1文件是InnoDB存储引擎的共享表空间文件,存放位置my.ini 中的 datadir="D:\phpStudy\MySQL\data",目录下. ...
- mfix添加文件后重新生成configure文件
mfix给了一些程序接口,大部分时候只用修改现有程序即可满足要求,这种情况不用修改configure文件,但是如果添加了新文件就需要做一些修改. 我用了Jian Cai的程序尝试了一下编译,该学者在2 ...
- 清华集训2017D2T1 小 Y 和地铁(metro)
题目:https://www.luogu.org/problem/show?pid=P4005 题意:一条线段,给定n个点(n<=44)其中每个点可能对应另外一个点.如果一个点有对应点,那么就要 ...
- 洛谷 P3191 [HNOI2007]紧急疏散EVACUATE(网络最大流)
题解 二分答案+Dinic最大流 二分答案\(mid\) 把门拆成\(mid\)个时间点的门 相邻时间的门连一条\(inf\)的边 预处理出每个门到每个人的最短时间 为\(dis[k][i][j]\) ...
- 最近研究了一个.NET的DHT网络搜索引擎,顺便重新整理了下引擎思路,供大家分享讨论下。
最近研究了一个.NET的DHT网络搜索引擎,顺便重新整理了下引擎思路,供大家分享讨论下.
- POJ - 3233 矩阵套矩阵
题意:给你矩阵\(A\),求\(S=\sum_{i=1}^{k}A^i\) 构造矩阵 \[ \begin{bmatrix} A & E \\ 0 & E\\ \end{bmatrix} ...
- ECharts 雷达图怎么在类目值下面显示数值
需要实现的效果: 官网里面的demo显示数值,都是在拐点处: [解决] 1.只显示类目 <div id="mychart" style="width:300px;h ...