`
yangxianjiangg
  • 浏览: 59483 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

css透明度的设置

    博客分类:
  • CSS
阅读更多
Css代码
  1. .transparent_class {   
  2.        filter:alpha(opacity=50);   
  3.        -moz-opacity:0.5;   
  4.        -khtml-opacity: 0.5;   
  5.        opacity: 0.5;   
  6. }  

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 .


分享到:
评论

相关推荐

    CSS透明度定义

    CSS透明度定义。解决各种浏览器,不同版本的透明度问题。

    CSS 透明度属性

    除了IE之外,目前主流浏览器, Opera 9.0及更高版本,Safari 1.2(WebKit 125) 及更高版本,chrome等等都支持opacity这个设置透明度的属性,opacity的属性值是0<number<1的数值,默认值是1。 例如50%透明的...

    css背景图片的背景裁切、背景透明度、背景变换等效果运用

    正如前面所说,仅仅依靠CSS现有的属性,我们无法实现背景裁切、背景透明度、背景变换和复杂背景定位等效果.为了实现这些效果,我们需要借助CSS的其他方法来实现,比如说CSS伪元素,他可以帮助我们模拟出这些CSS无法...

    CSS3教程(8):CSS3透明度指南

    “opacity”声明用来设置一个元素的透明度:层、文字、图片等…一个opacity的值为1的元素是完全不透明的,反之,值为0是完全透明的,看不见的。1到0之间的任何值都表示该元素的透明程度。 浏览器兼容性 opacity是...

    详解css透明度之rgba和opacity的区别及兼容

    对于设置透明度,我们有两个可以选的css3属性:rgba 和 opacity。这篇文章主要介绍了详解css透明度之rgba和opacity的区别及兼容,感兴趣的可以一起跟随小编来了解一下

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

    [code] .transparent_class {filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5; opacity: 0.5;} [/code] UPDATE: I wanted to pull this post out of the archives and update it a bit because it ...

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

    CSS3的透明度属性opacity想必大家都已经用...而对于不支持CSS3的浏览器如何进行透明处理,保持浏览器效果的一致,本篇文章主要介绍了详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法,有兴趣的可以了解一下。

    CSS如何只改变父元素背景透明度不改变子元素透明度

    使用css的opcity属性改变某个元素的透明度,但是其元素下的子元素的透明度也会被改变,即便重定义也没有用,不过有个方法可以实现,大家可以看看

    CSS3中使用RGBA设置透明度的示例

    下面是用rgba() 设置50%透明度的白色.  CSS Code复制内容到剪贴板 p { color: rgba(255, 255, 255, 0.5); }  RGBA是RGB色彩模型的一个扩展。这个缩写词代表红绿蓝三原色的首字母,Alpha值代表颜色的透明...

    div+css教程A标签属性hover背景图片透明度显示

    div+css教程A标签属性hover背景图片透明度显示 div+css教程A标签属性hover背景图片透明度显示 div+css教程A标签属性hover背景图片透明度显示 div+css教程A标签属性hover背景图片透明度显示

    关于css设置层透明

    2、使用如下代码设置透明度,可是你会发现这种方式不能对其子节点的元素设置不透明 复制代码代码如下: filter: alpha(opacity = 50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; 3、这种方法仅仅使用...

    懒人原生纯css3单色渐变至透明效果

    效果描述: 在我们的网页里,经常碰到这样的...现在好了,完全可以使用css3的代码来实现渐变,左侧定义一个颜色,右侧也设置一个颜色,并分别设置不同的透明度即可 使用方法: 关键在css样式中:10-13行

    css3系列教程(透明度).rar

    css3透明…不透明…渐变…随便你怎么叫它吧!这里是一些使用css3透明度的指南以及一些例子

    CSS样式设置元素的透明度以50%为例

    下面的代码兼容各种浏览器,用于定义对象的透明度,本范例设置透明度为50% 复制代码代码如下: .transparent_class { /* http://www.sharejs.com/codes/ */ filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-...

    使用css3背景渐变中的透明度来设置不同颜色的背景渐变

    我发现css3的背景渐变中的透明度可以解决这个问题(前提是背景渐变的颜色是相近的)。 我在这里简单说一下css3背景渐变中的线性渐变。线性渐变的一般结构是: 复制代码代码如下: background-image: linear

    div 背景透明度 如何设置一个div的背景透明度

    你读DIV背景颜色透明度的设置是否熟悉,这里和大家简单分享一下,通常我们通过DIV的style样式属性filter来设置DIV背景透明样式,也可根据alpha提供的参数进行组合控制。 本节向大家爱描述一下如何设置DIV背景颜色...

    CSS和CSS3思维导图(xmind版)

    opacity(不透明度)  box-sizing(控制盒模型的组成模式):指定两个boxes接壤 resize(元素缩放):指定一个div元素,允许用户调整大小 outline(外边框) background-origin(指定背景图片从哪里开始显示) background-...

Global site tag (gtag.js) - Google Analytics