zoukankan      html  css  js  c++  java
  • css透明背景兼容方案

    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和其他浏览器的两种不同图片格式,图个兼容呗。

  • 相关阅读:
    主流软件系统类别
    vue 生命周期
    redis 实现多属性查询
    业务逻辑层缓存设计
    ORM 缓存
    keepalived+nginx实现niginx高可用,宕机自动重启
    cookie sessionstorge localstorge 的比较
    css 定位
    2019年1月2日 生产者消费者模型 元旦快乐
    2018年12月25日 圣诞节快乐 生成器plus
  • 原文地址:https://www.cnblogs.com/cyweb/p/4120759.html
Copyright © 2011-2022 走看看