CSS透明opacity和IE各版本透明度滤镜filter的准确用法
滤镜名 说明
Alpha 让HTML元件呈现出透明的渐进效果
Blur 让HTML元件产生风吹模糊的效果
Chroma 让图像中的某一颜色变成透明色
DropShadow 让HTML元件有一个下落式的阴影
FlipH 让HTML元件水平翻转
FlipV 让HTML元件垂直翻转
Glow 在元件的周围产生光晕而模糊的效果
Gray 把一个彩色的图片变成黑白色
Invert 产生图片的照片底片的效果
Light 在HTML元件上放置一个光影
Mask 利用另一个HTML元件在另一个元件上产生图像的遮罩
Shadow 产生一个比较立体的阴影
Wave 让HTML元件产生水平或是垂直方向上的波浪变形
XRay 产生HTML元件的轮廓，就像是照X光一样
Alpha 滤镜参数详解
参数名 说明 取值说明
Opacity 不透明的程度，百分比。 从0到100，0表是完全透明，100表示完全不透明。
FinishOpacity 这是一个同Opacity一起使用的选择性的参数，当同时Opacity和FinishOpacity时，可以制作出透明渐进的效果，比较酷。 从0到100，0表是完全透明，100表示完全不透明。
Style 当同时设定了Opacity和finishOpacity产生透明渐进时，它主要是用赤指定渐进的显示形状。 0：没有渐进；1：直线渐进；2：圆形渐进；3：矩形辐射。
StartX 渐进开始的 X 坐标值
StartY 渐进开始的 Y 坐标值
FinishX 渐进结束的 X 坐标值
FinishY 渐进结束的 Y 坐标值
Html代码
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="transparent_class">测试透明度</div>
</body>
</html>
CSS代码：
.transparent_class {
/* Required for IE 5, 6, 7 */
/* ...or something to trigger hasLayout, like zoom: 1; */
width:300px;
height:300px;
line-height:300px;
text-align:center;
background:#000;
color:#fff;
/* older safari/Chrome browsers */
-webkit-opacity: 0.5;
/* Netscape and Older than Firefox 0.9 */
-moz-opacity: 0.5;
/* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/
-khtml-opacity: 0.5;
/* IE9 + etc...modern browsers */
opacity: .5;
/* IE 4-9 */
filter:alpha(opacity=50);
/*This works in IE 8 & 9 too*/
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/*IE4-IE9*/
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
}
需要声明的是，如果你要同时使用filter和-ms-filter，请将-ms-filter写在filter的前面
-msfilter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”; // first filter: alpha(opacity=50); // second
CSS透明opacity和IE各版本透明度滤镜filter的准确用法的更多相关文章
- CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
转载,原文见:http://blog.csdn.net/freshlover/article/details/17143341 CSS3的透明度属性opacity想必大家都已经用的无处不在了.而对于不 ...
- css透明属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS透明代码
透明往往能产生不错的网页视觉效果,先奉上兼容主流浏览器的CSS透明代码: .transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5 ...
- 兼容主流浏览器的CSS透明代码
透明往往能产生不错的网页视觉效果下面是兼容主流浏览器的CSS透明代码.transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; ...
- CSS透明属性详解代码
透明往往能产生不错的网页视觉效果,先奉上兼容主流浏览器的CSS透明代码: 代码如下: .transparent_class { filter:alpha(opacity=50); -moz-opaci ...
- （转）兼容主流浏览器的CSS透明代码
透明往往能产生不错的网页视觉效果下面是兼容主流浏览器的CSS透明代码.transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; - ...
- css透明背景兼容方案
css透明是一个技术活,因为这里面涉及到了IE8及以下版本不兼容opacity这个css3属性,而filter:alpha(opacity=80)这个值则是不兼容IE6.网上比较流行的透明css是这样 ...
- 使用RGBa和Filter实现不影响子元素的CSS透明背景
点击查看原文 问题 如果我们想要一个元素拥有半透明的背景,我们有两个选择: 使用CSS和 opacity 做一张 24-bit PNG 背景图片 在CSS中使用opacity有两个问题,一是为了适应所 ...
- CSS透明属性详解
.transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; ...
随机推荐
- 安卓笔记-可以滚动的TextView
本来是想做一个显示文字信息的,当文字很多时View的高度不能超过一个固定的值,当文字很少时View的高度小于那个固定值时,按View的高度显示.因为ScrollView没有maxHeight,无法满足 ...
- python下实现二叉堆以及堆排序
python下实现二叉堆以及堆排序 堆是一种特殊的树形结构, 堆中的数据存储满足一定的堆序.堆排序是一种选择排序, 其算法复杂度, 时间复杂度相对于其他的排序算法都有很大的优势. 堆分为大头堆和小头堆 ...
- (转)Go语言并发模型：使用 context
转载自:https://segmentfault.com/a/1190000006744213 context golang 简介 在 Go http包的Server中,每一个请求在都有一个对应的 g ...
- Ubuntu16.04部署phantomjs的一个问题
首先phantomjs是作为pyspider的一个外部依赖组件部署的. apt安装完出现问题: QXcbConnection: Could not connect to display Phantom ...
- Ocelot中文文档-认证
为了验证ReRoutes并随后使用Ocelot的任何基于声明的功能,如授权或使用令牌中的值修改请求. 用户必须像往常一样在他们的Startup.cs中注册认证服务,但他们给每个注册提供了一个方案(认证 ...
- c#学习笔记 day_one
C#学习笔记 day one Chapter 1 c#概述 1.1 c#概述 C#是微软设计的,简洁的,类型安全的,面向对象的语言.它以c/c++作为基础.它的开发环境是visual studio,最 ...
- tomcat7性能调优与配置（以windows版为例）
一.配置tomcat服务状态查看帐号(E:\Tomcats\apache-tomcat-7.0.73Test\conf下面的tomcat-users.xml中)加入:<user username ...
- 基于ThreadPoolExecutor，自定义线程池简单实现
一.线程池作用 在上一篇随笔中有提到多线程具有同一时刻处理多个任务的特点,即并行工作,因此多线程的用途非常广泛,特别在性能优化上显得尤为重要.然而,多线程处理消耗的时间包括创建线程时间T1.工作时间T ...
- 使用WSL连接Docker for Windows
在Windows下安装Docker for Windows Cotana搜索功能,打开Windows的Hype-v功能(注:会影响Virtualbox和Vmware的使用)并重启电脑. 从Docker ...
- Hype-v 共享文件办法
Hype-v在Windows下跑Windows系统,其效率要远好于VMWare,唯一蛋疼的就是剪贴板不能复制文件.共享文件的方案就剩下以下几种: 远程访问 虚拟磁盘 挂载镜像 挂载镜像把每个文件都制作 ...