美文网首页
透明度设置与兼容

透明度设置与兼容

作者: 代码使劲儿搬 | 来源:发表于2019-05-10 16:10 被阅读0次
如何实现背景透明,文字不透明,兼容所有浏览器?

在实际中设置样式的透明度一共有3种方法

  • css3的opacity:x,x 的取值从 0 到 1,如opacity: 0.8
  • css3的[rgba(red, green, blue, alpha)] alpha的取值从 0 到 1,如rgba(255,255,255,0.8)
  • IE专属滤镜 filter:Alpha(opacity=x),x 的取值从 0 到 100,如filter:Alpha(opacity=80)
使用说明:
  1. css3的[opacity:x]
    设置opacity元素的所有后代元素会随着一起具有透明性,一般用于调整图片或者模块的整体不透明度
    那么使用opacity实现《背景透明,文字不透明》是不可取的。

  2. css3的rgba
    兼容性:IE6、7、8不支持,IE9及以上版本和标准浏览器都支持
    一般用于调整background-color、color、box-shadow等的不透明度。
    在background-color中使用rgba,标准浏览器中,背景透明,文字不透明

  3. IE专属滤镜 filter:Alpha(opacity=x)
    IE浏览器专属,问题多多,本文以设置背景透明为例子,如下:

    • 仅支持IE6、7、8、9,在IE10版本被废除
    • 在IE6、7中,需要激活IE的haslayout属性(如:zoom:1或者overflow:hidden),让它读懂filter:Alpha
    • 在IE6、7、8中,设置了filter:Alpha的元素,父元素设置position:static(默认属性),其子元素为相对定位,
      可让子元素不透明
全兼容的方案

上以上3点分析可知,设置透明背景文字不透明,可采用的属性有rgba和IE的专属滤镜filter:Alpha
针对IE6、7、8浏览器,我们可以采用fiter:Alpha,针对标准浏览器我们采用rgba,那么问题来了,IE9浏览器2个属性都支持,一起使用会重复降低不透明度...

.demo{
  padding: 25px;
  background-color: rgba(0,0,0,0.5);/* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */
}
@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值 */
  }  
}

相关文章

  • 透明度设置与兼容

    如何实现背景透明,文字不透明,兼容所有浏览器? 在实际中设置样式的透明度一共有3种方法 css3的opacity:...

  • 2018-10-10

    一、透明度: 设置透明度的时候也是具有兼容性的: 二、获取行间样式: 三、获取非行间样式:(具有兼容性) 四、do...

  • 样式兼容

    背景透明度 兼容IE7+ , ff,chrome等主流浏览器 按钮透明 一个按钮,设置为透明的,很多时候是设置ba...

  • 解决IE8下opacity属性失效问题

    由于opacity属性存在兼容性问题,所以在IE8下,用opacity来设置元素的透明度,会失效,从而导致页面的样...

  • CSS深度操作(3)

    一、IE的兼容 二、过度动画 在transition中写入多个 三、圆角and阴影and透明度 圆角 阴影 透明度...

  • css实现背景透明文字不透明

    设置元素的透明度: -moz-opacity:0.8; /*在Firefox中设置元素透明度 filter: al...

  • 边框效果-css-v1.0.0

    半透边框 通过设置颜色的透明度实现。 框内圆角 方式1:为元素设置圆角,外层设置轮廓outline。圆角与直角之间...

  • iOS-常用小技巧03

    1.设置背景半透明: 在开发过程中,很多需要设置控件的透明度,下面提供几种设置控件透明度的方法

  • 整理

    1.canvas画图,让文字居中显示 2.canvas画一个带透明度的矩形 3.设置透明度后其他的不设置透明度

  • iOS - view渐变透明层遮盖

    项目中用到地图设置渐变色,查找资料找到两种方法: 一种设置颜色:为颜色设置渐变效果: 一种设置透明度:为透明度设置...

网友评论

      本文标题:透明度设置与兼容

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