CSS透明度设置

.transparent_class {

      filter:alpha(opacity=50);

      -moz-opacity:0.5;

      -khtml-opacity: 0.5;

      opacity: 0.5;

}

UPDATE: I wanted to pull this post out of the archives and update it a bit because it there seems to be a good amount of interest in this subject.

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 .
时间: 2024-08-03 16:13:15

CSS透明度设置的相关文章

CSS透明度设置支持IE,Chrome,Firefox浏览器

CSS文件里设置例如以下就可以 filter:alpha(opacity=60); //支持IE opacity:0.6; //支持Chrome.Firefox

CSS 透明度 设置 兼容IE FF

filter:Alpha(Opacity=80);/*IE*/ -moz-opacity:0.8;/*FF*/ opacity: 0.8;/*所有元素*/ 参数设置说明: Alpha(Opacity=number); /* 0 <= number <= 100,0=完全透明,100=完全不透明 */ -moz-opacity:number; /* 0.0 <= number <= 1.0,0.0=完全透明,1.0=完全不透明 */ opacity: number; /* 0.0 &

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

.transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } 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. Thi

CSS如何设置div背景透明度且兼容性良好

CSS如何设置div背景透明度且兼容性良好: 建议:尽可能的手写代码,可以有效的提高学习效率和深度. 设置对象的透明度在很多网页特效中都有实用,设置对象的透明度并不难,唯一的难点可能就是如何兼容各大主流浏览器,下面就简单介绍一下如何实现此效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" cont

使用JavaScript设置和改变CSS透明度

在Firefox, Safari, Chrome和Opera下的CSS透明度#myElement {opacity: .7;}IE下的CSS透明度IE下照旧有别于其他浏览器,并且目前也有三个不同版本的IE在广泛使用,透明度设置是不同的,有时需要额外的CSS来控制: #myElement {filter: alpha(opacity=40);}您可以使用下面的语法访问JavaScript中的CSS opacity 属性: document.getElementById("myElement&quo

CSS如何设置div半透明效果

CSS如何设置div半透明效果:设置元素的透明度在很多应用中都有使用,下面就介绍一下如何设置一个元素为半透明,其他的透明效果自己衍伸就可以了.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <t

【总结】CSS透明度大汇总

近年来,CSS不透明算得上是一种相当流行的技术,但在跨浏览器支持上,对于开发者来说,可以说是一件令人头疼的事情.目前还没有一个通用方法,以确保透明度设置可以在目前使用的所有浏览器上有效. 这篇汇总主要是提供一些CSS不透明的详细介绍,代码示例和解释,以实现这项有用的CSS技术在您的项目中兼容所有浏览器. 关于CSS 透明度,有一点需要注意的是,它虽然使用了很多年,但它一直以来都不是一个标准属性.它是一种非标准技术,应该是CSS3规范的一部分. 1. 旧的Opacity设置 以下代码是Firefo

html通过css来设置半透明背景

Html/Css标签透明度效果的实现,在html中,实现半透明背景,在HTML Div+Css编程中,为了实现版透明,通常有3中做法. 第一种是HTML5的透明,在H5中支持透明背景颜色,但遗憾的是,H5中的办透明背景颜色只支持 rgba的洗发,不支持16进制的写法 如: background-color:rgba(0,152,50,0.7);// -->70%的不透明度 background-color:transparent;支持完全透明 在传统浏览器中,IE浏览器的独特性也是某些透明度设置

CSS透明度大汇总

近年来,CSS不透明算得上是一种相当流行的技术,但在跨浏览器支持上,对于开发者来说,可以说是一件令人头疼的事情.目前还没有一个通用方法,以确保透明度设置可以在目前使用的所有浏览器上有效. 这篇汇总主要是提供一些CSS不透明的详细介绍,代码示例和解释,以实现这项有用的CSS技术在您的项目中兼容所有浏览器. 关于CSS 透明度,有一点需要注意的是,它虽然使用了很多年,但它一直以来都不是一个标准属性.它是一种非标准技术,应该是CSS3规范的一部分. 1. 旧的Opacity设置 以下代码是Firefo