美文网首页
透明背景图IE、360浏览器不兼容

透明背景图IE、360浏览器不兼容

作者: 鲍逸池leo | 来源:发表于2017-08-09 16:05 被阅读0次

最近在项目中遇到了浏览器兼容问题,透明背景图在IE或360兼容模式下没有效果,以前都是网上搜到结果,直接用了,并没有深入的去理解和利用,总会在下一次使用的时候忘记。为了让自己在前端方面学习更有成效,想想还是记录下来比较好,做个总结,还有不完善的地方还请多指教!

知识要点:

CSS3的rgba()浏览器兼容

1.rgba()颜色值目前得到以下浏览器的支持:IE9+、Firefox3+、Chrome、Safari以及Opera10+

2.rgba颜色值是rgb颜色值的一个扩展,增加一个alpha,它规定了对象的透明度

3.rgba()颜色值的规定是:rgba(red,green,blue,alpha),alpha参数介于0.0(完全透明)和1(完全不透明)的数值

例:

p{2background-color:rgba(0,0,0,0.5)3}

显示效果:

rgba()中的前三个数值越接近0,颜色显示越接近黑色,反之越接近255,颜色显示越接近白色。但是该设置在IE+以下或360兼容模式下,背景透明效果都是无效的。360兼容模式保留了你电脑里本身的IE内核,如果你的电脑浏览器是IE7,兼容模式下就相当于是IE7,同理可得。所以,为了兼容360兼容模式,就得兼顾IE浏览器,在IE浏览器下,透明背景色的设置如下:

p{filter:Alpha(opacity=50);/*只支持IE6、7、8、9*/position:static;*zoom:1; }

IE6、7、8只能设置position:static(默认属性) ,否则会导致子元素继承Alpha值,激活IE6、7的haslayout属性,让它读懂Alpha,设置子元素为相对定位,可让子元素不继承Alpha值,保证字体颜色不透明。

相关文章

  • 透明背景图IE、360浏览器不兼容

    最近在项目中遇到了浏览器兼容问题,透明背景图在IE或360兼容模式下没有效果,以前都是网上搜到结果,直接用了,并没...

  • vue在IE报错‘vuex requires a Promise

    vue项目做完之后,在IE浏览器,或者360浏览器兼容模式下,根本显示不出来。(360浏览器分为极速模式以及兼容模...

  • 电商测试总结

    按照测试类型来划分 兼容性 主要是在浏览器兼容(360浏览器、IE6、 IE8浏览器、谷歌、火狐==) 操作系统,...

  • 360极速模式和兼容模式区别

    360的兼容模式有可能兼容的不是你电脑安装的IE版本,你在360浏览器打开时,按F12,如果你电脑上安装的是IE9...

  • PC端浏览器兼容浅谈

    代码兼容:IE7及以上,360,chrome,firefox,opera,搜狗 1. 什么是浏览器兼容问题: 由于...

  • IE内核情况下解决line-height不兼容的问题(如,360

    IE内核情况下解决line-height不兼容的问题(如,360安全浏览器、edge ) 我需要的是“xxxxx”...

  • 笔记:vue搭建项目下载模块

    大致步骤: 下载模块: vue项目再IE浏览器不兼容:(IE8以上版本)IE浏览器报错:vuex requires...

  • vue兼容360

    一.浏览器模式如果你用ip访问你的网站,360浏览器默认是兼容模式的,兼容模式是用IE内核如果你用域名访问你的网站...

  • css3课件

    第一章 字体属性1:css3属性具有兼容性,不兼容IE9以下浏览器,IE9部分兼容。 2:各大浏览器的内核兼容写法...

  • 判断浏览器IE

    经常遇到一些兼容问题,有的时候在所有ie上不兼容,有的只在部分ie上不兼容,根据具体问题我们要进行浏览器判断 1、...

网友评论

      本文标题:透明背景图IE、360浏览器不兼容

      本文链接:https://www.haomeiwen.com/subject/qclqrxtx.html