精华内容
下载资源
问答
  • CSS透明背景

    2014-04-30 09:49:09
    #div2 { height:330px; filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;z-index:100; background-color:#ffffff; }
    #touming {  height:330px; filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;z-index:100; background-color:#ffffff;  }


    展开全文
  • css 透明背景

    2010-04-14 17:35:00
    这个背景透明的 /*IE*/ filter:alpha(opacity=50);/*FF*/ opacity:0.5;

     

    /*IE*/  

     

    filter:alpha(opacity='50');

    /*FF*/  

     

     opacity:0.5;

    展开全文
  • css透明背景兼容方案

    2019-10-07 11:35:24
    css透明是一个技术活,因为这里面涉及到了IE8及以下版本不兼容opacity这个css3属性,而filter:alpha(opacity=80)这个值则是不兼容IE6.网上比较流行的透明css是这样子写的。 .transparent_class { /* IE 5-7 */ ...

    css透明是一个技术活,因为这里面涉及到了IE8及以下版本不兼容opacity这个css3属性,而filter:alpha(opacity=80)这个值则是不兼容IE6.网上比较流行的透明css是这样子写的。

    .transparent_class {
    
    /* IE 5-7 */
    filter: alpha(opacity=50);
    
    /* Netscape */
    -moz-opacity: 0.5;
    
    /* Safari 1.x */
    -khtml-opacity: 0.5;
    
    /* Good browsers */
    opacity: 0.5;
    }

    更多还可以看我写过的这里

    这里我们使用的是整个层的一个透明,当你使用了上面这个代码之后,那里面的文字和图片都会变透明了,但有时候我们需要的知识背景颜色透明,或者背景图片的一个透明。

    1.背景颜色透明

    又是一个兼容问题了,IE8及以下的不支持rgba(RGBA 颜色值是 RGB 颜色值的扩展,带有一个 alpha 通道 - 它规定了对象的不透明度。),下面这个代码是网上比较流行的一个写法,支持IE系列浏览器,不过前辈的经验是少用哦。

    .hex_color {
    	filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#7FFF0000', endColorstr='#7FFF0000');
    }
    :root .hex_color {
    	filter:none;	 /*处理IE9浏览器中的滤镜效果*/
    	background:rgba(255,0,0,0.5);
    }

    2.透明背景图片

    我们都知道IE6下透明的背景图片会有默认的阴影,要解决这个问题可以有这么几种方法

    第一种:使用jsDD_belatedPNG来实现,话说淘宝腾讯这些的都不用这些插件的,也许他们都是通过css来解决的吧

    第二种:把图片保存为png8的格式,我们都知道png8保存的时候会有一些阴影和锯齿的影响。今天在一篇文章里面看到可以用firework来导出png8.

    原文提到:

    在fireworks里一定要使用导出alpha 透明的png8,而不是保存alpha 透明的png8。
    步骤:

     Fireworks >>文件>>导出向导

    然后一步步往下会得到下图界面,保存就好了:

    图示

    用这个保存方法解决了毛边的问题,这样就不会有是使用png8坚硬的边缘或者使用png24的蓝底问题了。但图片的半透都成了全透,所以如果图片有半透的,并且半透是需要保留的,那么现在我的办法只有使用png24格式在IE6下使用滤镜。

    第三种:使用滤镜。

    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://a.xnimg.cn/xnapp/music/images/dot_2.png");
    _background: none;

    第四种:除了png8之外,使用gif和jpg就是另外一种方案。可以分出IE6和其他浏览器的两种不同图片格式,图个兼容呗。

    转载于:https://www.cnblogs.com/cyweb/p/4120759.html

    展开全文
  • html+css透明背景

    2011-09-07 23:19:23
    1、半透明背景,内容不透明 2、兼容ie6、7、8,chrome、firefox,若有其他兼容问题请告知,跪谢 3、独立背景浮动,不涉及父级和内容层
  • 在项目中用到的透明效果,除了用PNG24图片外就是用如下样式了: 复制代码代码如下: filter:alpha(opacity=70); /* IE */ -moz-opacity:0.7; /* Moz + FF */ opacity: 0.7; /* 支持CSS3的浏览器(FF 3.6也支持)*/ ...
  • .demo{ padding: 25px; background-color: rgba(0,0,0,0.5);/* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */} .demo p{ color: #FFFFFF;} @media \0screen\,screen\9 {/* 只支持IE6、7、8 */...
    .demo{
      padding: 25px;
      background-color: rgba(0,0,0,0.5);/* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */}
    .demo p{
      color: #FFFFFF;}
    @media \0screen\,screen\9 {/* 只支持IE6、7、8 */
      .demo{
        background-color:#000000;
        filter:Alpha(opacity=50);
        position:static;/* IE6、7、8只能设置position:static(默认属性) ,否则会导致子元素继承Alpha值 */
        *zoom:1;/* 激活IE6、7的haslayout属性,让它读懂Alpha */}
      .demo p{
        position: relative;/* 设置子元素为相对定位,可让子元素不继承Alpha值 */}  
    }
    
    
    
    
    http://www.gaoxiaors.icoc.in/
    
    展开全文
  • /* 背景默认情况下是包括border区域的 */ background-clip : padding-box ; } .box02 { /* box-shadow支持逗号分隔语法,可以创建任意数量的投影 */ box-shadow : 0 0 0 10 px #333 , 0 ...
  • < div class ..."linkGroup linkGroup-25" ...css中兼容浏览器代码: background-color : #000 ; background-color : rgba( 0 , 0 , 0 ,. 7 ); opacity : 0.50 ; filter :alpha(opacity= 50 );
  • 问题 如果我们想要一个元素拥有半透明背景,我们有两个选择:...二是opacity不仅使目标元素的背 景变得半透明,而且使它所有的子元素的背景也变成了半透明。这意味着它里面所有的文本(译者注:图片也一样)都具...
  • 在应用ajax的loading 状态时用到透明层,用css滤镜实现,以下兼容FF与IE  .covering  {  width:55%;   height:85%;   position:absolute;   z-index:100;   top:0px;  left:0px;   ...
  • 在项目中用到的透明效果,除了用PNG24图片外就是用如下样式了: filter:alpha(opacity=70); /* IE */ -moz-opacity:0.7; /* Moz + FF */opacity: 0.7; /* 支持CSS3的浏览器(FF 3.6也支持)*/今天却用傻了,居然IE...
  • 1#leftCtn{}{ 2width:50%;height:80%; 3position:absolute;z-index:100;top:0px;left:0px; 4background-color:yellow; 5filter:alpha(opacity=60); 6-moz-opacity:0.6; 7opacity:0....
  • CSS设置背景透明

    万次阅读 多人点赞 2018-04-16 09:05:53
    实现透明css方法通常有以下3种方式,以下是不透明度都为80%的写法:css3的opacity:x,x 的取值从 0 到 1,如opacity: 0.8css3的rgba(red, green, blue, alpha),alpha的取值从 0 到 1,如rgba(255,255,255,0.8)IE...
  • css背景透明

    2019-09-28 18:14:04
    css实现背景透明而文字不透明 平时我们所说的调整透明度,其实就是在样式中调整不透明度,而实现透明css方法通常有如下3中方式: css3的opacity:x。x的取值为0到1,如opacity:0.5表示不透明度为50%; css...
  • 背景透明度 1.设置透明背景色rgba background-color:rgba(220,38,38,0.2); 2.通过opacity属性改变透明度 background: #43bff5; opacity:0.2; 背景色透明 background: transparent;
  • 今天要设计一个定位在图片上的标签,标签的背景要有一定的透明度,使用到了opacity的属性,过去没太注意这个属性的兼容性问题,结果采坑了。。。1.完成后的效果完成前后的效果应该是这样的:背景透明背景透明后 ...
  • CSS透明背景

    2019-10-16 11:02:59
    代码示例 <!DOCTYPE html> <html> <head> <title>半透明背景示例</title> <style type="text/css"> #content { background:rgba(0, 0, 0...
  • CSS实现背景图像透明需要用到的属性是opacity属性,但是在有文字的情况下,为了防止文字透明我们需要将元素分开。CSS中实现背景图像透明的属性是opacity属性,但是,如果你使用它来创建带有文本的内容的话,你就会...
  • css 设置透明背景

    2020-10-27 19:24:47
    rgba(0,0,0,0),前面三个数字是rgb中的三个数字,合起来代表的是颜色,最后一个数字代表的是透明度,他的值是从​​​​0-1的,其中1是代表一点都不透明,0代表的是完全透明,使用这个方法就只会设置div背景透明,而...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,755
精华内容 1,502
关键字:

css透明背景