RBGA背景颜色透明的改进 | 黄锦诚的个人博客

黄锦诚的个人博客--有志者是锦诚!

RBGA背景颜色透明的改进

一、开篇前想说的一些话

自从去年转行以来,刚刚好一年的时间没关注前端开发这一块的信息了,一年的时间过去了,觉得时间过得很快。转行了,以为没什么机会接触前端这块了,也以为不会再碰这些东西了,但是工作空闲之余,还是会忍不住看看之前经常关注的博客,发现更新很多东西了,而自己的就一直都没更新了。最后,还是觉得无法放舍得下对前端的热爱,终于还是鼓起了勇气再继续再写写东西,但是发现,太久没练了,很多东西也已经遗忘和生疏了,原先很多想写的题材现在都无法有完整的思路写下来了,或是不知从何写起了,那个痛苦啊。

万事开头难,重新开头更难,现在,还是硬着头皮先写一篇以作开头吧。

现在,重新开始了,不容易啊!

好的,我回来了!

前端开发发展很快,一年前,我所在的公司现在还在纠结IE6的兼容性的问题,但是现在对于自己的日常自娱自乐的搞点小东西,已经完全不想再考虑IE6这么畸形的东西,正在暗暗的高兴可以脱离掉IE6的时代,但是又重新回到痛苦的年代,但IE6却是一个时代的辉煌,现在单位里的办公系统使用的浏览器只能是IE6,所有系统的开发都是只针对IE6而开发的,为止,对着IE6,有着一股摆脱不了的隐隐的痛在心里面。

二、还是开篇吧

opacity
常常在一些网站上会看到一些透明的效果,让人看起来透明的效果很有质感,很喜欢的有木有,特别在在WIN7里,这些半透的效果发挥得淋漓尽致,所以在网站上也喜欢看到一些半透明的效果,出于已我形成的习惯,会注意看看效果是怎么实现的。

打开聚划算和拍拍团购,一眼就看到了这个透明的效果,马上联想到opacity和IE特有的滤镜,打开小Bug看一下,果然是如此实现的。
mask
但是众所周知,像一个这样半透明的效果里如果还包含一个子元素的文字的话,子元素是会继承父元素的这个透明度的属性的,那怎么处理呢?看一下聚划算的淘宝前端和拍拍的腾讯前端是怎么处理的,仔细用小Bug对比看一下,都是用了一个单独的标签来做半透明的效果,文字再用另外的标签作绝对定位在这个半透明的层上,避免了子元素会继承父元素的这个透明度的属性,从视觉上实现了效果,但是对于我这种有点儿洁癖和强迫症的人来说,虽然这样是实现了效果了,但是要无故的多一个空的无用的标签出来,看着代码就会觉得不舒服,有没有其他的处理办法更加巧妙呢?于是决定折腾一翻。
于是想到了CSS中关于颜色值的表示方式RGBA,首先普及一下RGBA这个东西,或许还有很多人不知道这个是什么东东。

点击打开w3school上的关于“CSS 合法颜色值 ”的说明.

RGBA 颜色
RGBA 颜色值是这样规定的:rgba(red, green, blue, alpha)。alpha 参数是介于 0.0(完全透明)与 1.0(完全不透明)的数字。
RGBA 颜色值是 RGB 颜色值的扩展,带有一个 alpha 通道 – 它规定了对象的不透明度。
RGBA 颜色值得到以下浏览器的支持:IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。

好了,既然RGBA能够得到大多少的浏览器的支持,那么对于不兼容的IE8以下,也就只有用滤镜处理了。

说做就做,为了减少掉一个多余的空白的标签,于是就有了以下嵌套的的HTML:

  1. <ul>
  2.  <li>
  3.   <img src="../../../logo.png" alt="" width="185" height="52">
  4.   <h4 class=""><a class="http://www.aqy106.com" title="黄锦诚的个人博客" href="#">黄锦诚的个人博客</a></h4>
  5.  </li>
  6. </ul>

然后就是和很多的网上的方法一样,标准的浏览器就用RGBA,为了避免第二个 background的颜色把第一个的 background重定义了,就在第一个RGBA后加个“!important”的HACK了,当然IE这个怪胎就是用filter了,然后加个“position:relative”的相对定位属性,于是就有了以下的CSS。

  1. background:rgba(0, 0, 0, 0.7)!important; background:#000; filter:Alpha(opacity=70); position:relative;

具体DEMO在这里,点击打开

三、结束语

当然地,其他定位什么的就自行处理一下就行了,这样的基本能达到要求,但是细心的你也许会发现,IE6和7里面的文字还是被透明了,且IE8和10的透明是基本一致的,IE9的背景透明反而是变浅了的,就上面的HTML结构暂时还没有更好的解决办法,如果文本外加一个空的标签包裹一下,实现的兼容性效果没什么问题,但是多出一个空的标签,和前面的说的脱被子放屁一样,也和本文的初衷不一样了,所以暂不研究这个问题,等待后期再研究。

另外RBGA和opacity、 filter的关系如何,也是后期再继续充分探讨的一个问题,但目前暂时更新到这里先,欢迎指正文中不对的问题,或有更好的实现方法,欢迎赐教。





发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

黄锦诚 腾讯微博
黄锦诚,专注前端、分享生活、记录工作、关于一切,这里有不一样的惊喜!

分类

Wopus主机优惠码

无觅相关文章插件,快速提升流量