精华内容
下载资源
问答
  • css透明度

    2015-10-08 15:07:47
    一句话搞定透明背景! .transparent_class{ filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity:0.5; opacity:0.5; } UPDATE:I wanted

    一句话搞定透明背景!
     

    .transparent_class {   
          filter:alpha(opacity=50);   
          -moz-opacity:0.5;   
          -khtml-opacity: 0.5;   
          opacity: 0.5;   
    }   
    1.  

    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控制透明度倒不麻烦。
    filter:alpha(opacity=50); /*IE滤镜,透明度50%*/
    -moz-opacity:0.5; /*Firefox私有,透明度50%*/
    opacity:0.5;/*其他,透明度50%*/
     
    举个例子:通过ie6 ie7 ie8 ff3 opera 谷歌 safari测试
     
    #test{
    background-color:#0000CC;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    opacity:0.5;
    width:100px ;
    height:100px;
    }
    但是还是会有很多问题,浏览器兼容性问题,等而且IE滤镜的频繁使用会使浏览器的执行效率降低。所以不提倡过多使用。也还有其他方法可以模拟,比如用宽高都是1px的透明png图片覆盖等等。
    /**************************************************/
    LZ自己举一反三啊,前景色不就是color么
    #test{
    background-color:#000
    }
    #test span{
    color:#fff;zoom:1 /*触发IE下块级元素*/
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    opacity:0.5;
    }
     
    <div id="test"><span>前景色透明度</span></div>
    LZ看看“前景色透明度”这几个字是不是纯白色,还是白色的50%透明
     
     
     
     
    展开全文
  • CSS透明度定义

    2015-07-13 13:29:00
    CSS透明度定义。解决各种浏览器,不同版本的透明度问题。
  • CSS 透明度属性

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

    千次阅读 2015-01-30 11:22:21
    // CSS透明度代码: filter:alpha(opacity=70); /*IE滤镜,透明度70%*/ -moz-opacity:0.7; /*Firefox私有,透明度70%*/ opacity:0.7;/*其他,透明度70%*/} 文章来源...
    // CSS透明度代码:
    


    filter:alpha(opacity=70); /*IE滤镜,透明度70%*/
    -moz-opacity:0.7; /*Firefox私有,透明度70%*/

    opacity:0.7;/*其他,透明度70%*/}


    文章来源[http://blog.sina.com.cn/s/blog_1378587330102viny.html]

    展开全文
  • css透明度总结

    2013-12-26 17:02:48
    近年来,CSS不透明算得上是一种相当流行的技术,...本文主要通过一些代码来说明如何实用CSS透明度才可以让其兼容你的浏览器。 1.旧版本的opacity设置   以下代码是在FireFox和Safari旧版本中的透明度设置 #myOpacity{

           近年来,CSS不透明算得上是一种相当流行的技术,但在跨浏览器支持上,对于开发者来说,可以说是一件令人头疼的事情。目前还没有一个通用方法,以确保透明度设置可以在目前使用的所有浏览器上有效。本文主要通过一些代码来说明如何实用CSS透明度才可以让其兼容你的浏览器。

    1.旧版本的opacity设置

          以下代码是在FireFox和Safari旧版本中的透明度设置

    #myOpacity{
           -khtml-opacity:0.5;
           -moz-opacity:0.5;
        }
       

    2.在现代浏览器中的opacity设置

        以下代码是除了IE9,IE8,IE7,IE6以外所有当前浏览器(chrome,firefox,opera,safari,IE9+)最为简单的透明度设置

    #myOpacity{
         opacity:0.5;
    }
           上面语法是将一个元素设置为50%的透明度。特别注意,opacity:1 表示将元素设置为不透明,opacity:0 表示将一个元素设置为完全透明。另外,opacity的属性值可以精确到小数点后两位(如,0.56),但是一般情况下只要小数点后以为就足够了,因为我们肉眼很难分辨出这细微的差别。

    3.在IE9,IE8,IE7,IE6中的opacity设置

          设置透明度代码如下

    #myOpacity{
         filter:alpha(opacity=50);
    }
        注意,在种形式中,opacity值的范围是0-100,数值越低说明越接近透明。

    4.使用javascript改变css透明度

           你可以使用下面的语法访问JavaScript中的CSS opacity 属性:

       document.getElementById("myOpacity").style.opacity="0.5";      
          //适用于2中所提到的浏览器
       document.getElementById("myOpacity").style.filter="alpha(opacity=50)";     
          //适用于3中所提到的浏览器
    5.实用jQuery改变css透明度

          直接使用jQuery设置CSS透明度更直观更容易实现,因为在所有浏览器代码都一样,并且你不必担心在IE下元素是否要触发haslayout:

    $("#myOpacity").css({"opacity":"0.5"});  //所有浏览器有效

    当然你也可以使一个元素动画透明:

    $("#myOpacity").animate({opacity:0.5},1000,function(){
      //回调函数
    });
    

           
        如果以上内容有错漏,欢迎大家指正,我很乐意改正并且和大家进行交流。
    





    展开全文
  • css透明度继承问题
    css透明度继承问题解决方案:

         http://www.cnblogs.com/275095923/archive/2011/12/13/2285657.html

    展开全文
  • 原理很简单就是修改元素的css透明度。 在线预览效果:http://jsfiddle.net/dtdxrk/BHUp9/embedded/result/ 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv=”Content-Type” ...
  • CSS 透明度清除继承

    千次阅读 2013-01-01 20:25:47
    今晚在写自己一个网页游戏的时候,遇到一个问题,就是CSS透明度的继承问题,我先解析下我的问题。  假如father设置了透明度,那么child也会继承他的透明度,即使你修改child里面的透明度也不会生效...
  • CSS透明度设置

    2015-08-20 11:09:44
    设置透明度
  • [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透明度的设置(兼容所有浏览器) .transparent_class { background:rgba(255, 0, 0, 0.5); /* IE 8 不兼容 */ filter:alpha(opacity=50); /*IE滤镜,透明度50%*/ -moz-opacity:0.5; /...
  • 白色,50%透明的两种写法 // 白色,50%透明 color: #ffffff80; // 白色,50%透明 color: rgba(255, 255, 255, .5);
  • 前端----CSS透明度属性opacity

    万次阅读 2018-09-24 11:23:21
    指定透明度的属性是opacity,属性值从 0.0 到 1.0。值越小,越透明。 img{ opacity:0.4; filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */ } IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity...
  • 怎样在CSS样式中设置背景的透明度 怎样在CSS样式中设置背景的透明度,下面给出一个具体的实例。把类为box的层设为透明。 <div class="box"></div> <style> .box{width:300px; height:200px; ...
  • css透明度兼容性

    2014-07-24 13:25:41
    出校门快两年了,自己
  • CSS透明度兼容写法

    千次阅读 2017-02-02 11:43:09
    filter: Alpha(opacity=10); /* IE */ -moz-opacity:0.1; /* FF 主要是为了兼容老版本的FF */ opacity:0.1; /* FF */
  • 一、关于透明度 background-color:hsla(0,23%,56%,1); opacity 设置透明度,只能针对整个盒子设置透明度 子盒子会继承父盒子的透明度 .out{ width: 200px; height: 200px; background: green; border: 1px ...
  • 在安卓端,如果出现设置opacity 透明度失效的时候 请检查 { opacity: 24%; } opacity的值是不是百分比,如果是百分比请换成小数。 {opacity: 0.24;} 有一定几率就会恢复正常。 希望对你有帮助。 ...
  • 当给div1设置透明度后,span里面的文字也将“继承”父级元素的透明度属性,但是这种情况并非是我们想要的。那如何将里面文字的不透明度去除呢? 有一种比较常见的方法:  将内容部分放入一个与透明层同级的...
  • .class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; }
  • 尤其是IE系列和其他的浏览器总是不兼容,我们通常要为IE6,7书写单独的CSS文件,甚至导致了CSS Hack 这一技术的流行。 下面我来谈谈,对于一些流行的CSS效果的跨浏览器解决方案。 很多程序员都很奇怪,为什么...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 78,413
精华内容 31,365
关键字:

css透明度