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 一.方法一:借 ...
随机推荐
- 【离散数学】 SDUT OJ 谁是作案嫌疑人?
谁是作案嫌疑人? Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Problem Description 刑侦大队对涉及六个嫌 ...
- 洛谷 P2330 [SCOI2005]繁忙的都市(最小生成树)
嗯... 题目链接:https://www.luogu.org/problemnew/show/P2330 这道题的问法也实在是太模板了吧: 1.改造的道路越少越好 2.能够把所有的交叉路口直接或间接 ...
- SDK 开发 .a .framework .bundle (xcode引用) 依赖sdk工程
一. 静态库.a 1.创建静态库工程 Cocoa Touch Static Libray ,然后可以创建一个测试视图 TestView 2.暴露头文件 -> Build Phases--> ...
- 关于zabbix _get返回Could not attach to pid的问题
分析:这是因为由于zabbix客户端没有权限,导致zabbix_server端无法获取到键值数据!! 解决:在客户端上添加用户sudo的权限就可以解决了. 验证:是脚本的话还要在脚本里加上sudo的命 ...
- <转> django模板语言filter方法
Django的模板是一个简单的文本文件,它可以生成任何文本格式(HTML.XML.CSV等),在本文开始之前先看一个Django模板的例子: 从这个例子中可以看到,模板标签可以是单独出现的,如exte ...
- 113th LeetCode Weekly Contest Reveal Cards In Increasing Order
In a deck of cards, every card has a unique integer. You can order the deck in any order you want. ...
- java 并发完成任务之CountDownLatch
1.CountDownLatch是一个同步辅助类,犹如倒计时计数器,创建对象时通过构造方法设置初始值,调用CountDownLatch对象的await()方法则处于等待状态,调用countDown() ...
- [转] Tomcat 禁用URL中的JSESSIONID
[From] http://stackoverflow.com/questions/962729/is-it-possible-to-disable-jsessionid-in-tomcat-serv ...
- Q443 压缩字符串
给定一组字符,使用原地算法将其压缩. 压缩后的长度必须始终小于或等于原数组长度. 数组的每个元素应该是长度为1 的字符(不是 int 整数类型). 在完成原地修改输入数组后,返回数组的新长度. 进阶: ...
- webgoat环境搭建
链接: https://pan.baidu.com/s/1gfEKIyB 密码: 5zdq 1:配置Java环境变量,过程请找度娘 2:解压下载好的tomcat 3:将webgoat-containe ...