css透明度的设置 (兼容所有浏览器)

转载 2013年12月05日 09:35:29
.transparent_class {
      	filter:alpha(opacity=50);
      	-moz-opacity:0.5;
      	-khtml-opacity: 0.5;
      	opacity: 0.5;
     	overflow:hidden;
	background-color: #CAE1FF; 
	width: 100%; 
	height: 100%; 
	position: absolute; 
	left: 0; 
	top: 0; 
	display: none; 
	overflow: hidden;
     	z-index:100;
}


Here is what each of those CSS properties is for:

opacity: 0.5; This is the “most important” one because it is the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. This would be all you need if all browsers supported current standards. Which, of course, they don’t.
filter:alpha(opacity=50); This one you need for IE.
-moz-opacity:0.5; You need this one to support way old school versions of the Mozilla browsers like Netscape Navigator.
-khtml-opacity: 0.5; This is for way old versions of Safari (1.x) when the rendering engine it was using was still referred to as KTHML, as opposed to the current WebKit .
overflow: (1)visible:默认值。内容不会被修剪,会呈现在元素框之外。 (2):hidden:内容会被修剪,并且其余内容是不可见的。(3):scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。(4):auto:如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。(5):inherit:规定应该从父元素继承 overflow 属性的值
z-index:对于这个属性,我个人的理解是指网页的整体的一个层,和我们视线垂直的网页面,z-index的值越大,这个div离我们的实现就越近,也就是说在别的div的上面。

感谢原文出处:http://justcoding.iteye.com/blog/545301#comments;

opacity: 0.5; css透明覆盖详解

.transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacit...
  • forest_fire
  • forest_fire
  • 2016年03月21日 10:41
  • 1038

Opacity多浏览器透明度兼容处理

用来设定元素透明度的 Opacity 是CSS 3里的一个属性。当然现在还只有少部分浏览器支持。 不过各个浏览器都有自己的私有属性来支持,其中包括老版本的Mozilla和Safari: IE: f...
  • chen0o0
  • chen0o0
  • 2015年05月23日 10:57
  • 1882

CSS透明opacity和IE各版本透明度滤镜filter的最准确用法

CSS3的透明度属性opacity想必大家都已经用的无处不在了。而对于不支持CSS3的浏览器如何进行透明处理,保持浏览器效果的一致,这个估计谁都会写,但是涉及到filter的具体语法含义和各版本写法的...
  • freshlover
  • freshlover
  • 2013年12月05日 17:36
  • 120660

CSS透明opacity和IE各版本透明度滤镜filter的准确用法

Opacity属性用来设置一个元素的透明度,取值范围是0~1之间,不可为负值;opacity取值为1是完全不透明,取值为0是完全透明,只是视觉上看不见。 浏览器对opacity属性的兼容性: -m...
  • YLXB2
  • YLXB2
  • 2017年01月24日 15:40
  • 344

ie6-ie8不支持opacity透明度的解决方法

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);/*兼容ie8及以下*/
  • u011141052
  • u011141052
  • 2016年03月29日 16:28
  • 10494

CSS解读之alpha通道与opacity属性的区别

上期在谈到border的用途的时候,在最后列举的两个实例中均用到了一个transparent属性值,从字面意思也知道,这个属性值其实和颜色是并列的,不过它表示的是透明。一般的HTML标签在未指定其背景...
  • qinshenxue
  • qinshenxue
  • 2014年01月02日 09:19
  • 8208

HTML 使用CSS 设置透明度Opacity

HTML 使用CSS 设置透明度Opacity HTML 使用CSS 设置透明度Opacity Html/Css标签透明度效果的实现,在html中,实现半透明背景,在H...
  • bestlove12345
  • bestlove12345
  • 2016年06月29日 19:04
  • 1631

CSS3中Opacity透明度等一些特效

Opacity 透明度 透明度属性是 CSS 中非常常用和流行的一个属性,目前已经广泛被主要浏览器支持,可惜的是 IE6/7/8 均不支持该属性。虽然 IE 没有支持这个 CSS 属性,但是我们可以...
  • 99guo
  • 99guo
  • 2014年12月29日 08:54
  • 9984

改变opacity实现图片轮播

这里实现原理我就不详细述说了,主要是通过改变图片的opacity,利用fadeIn和fadeOut来实现过渡效果,使切换不会显得很突兀。 但是我在这里遇到了一个问题,让我纠结了一段时间。问题是,我发...
  • cwzhsi
  • cwzhsi
  • 2016年02月22日 14:33
  • 1083

cocos2dx中Opacity属性及相关操作(1)

Opacity指的是Node的透明度,从0~255之间的一个整数,通过Node的setOpacity来进行设置:...
  • mdifferent
  • mdifferent
  • 2014年10月02日 17:03
  • 7442
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css透明度的设置 (兼容所有浏览器)
举报原因:
原因补充:

(最多只允许输入30个字)