css透明度的一些兼容测试

前言

网站丢给了外包公司来弄，但是老外写css的时候似乎没有考虑到国内的浏览器市场，于是只用了opacity这个属性来写，当IE8-的浏览器访问的时候，浮动层就像一块大黑斑药膏贴在哪里。很显然，婀娜多姿的模特被黑色药膏挡住了，用户完全感觉不到药膏下的她是有多么秀色可餐，因此也没有点击“性趣”去点击这条新闻了。所以必须来修改，让婀娜多姿的图片有种朦胧美。

我们希望起码IE7+的效果都是这样 
 
这只狗有点丑，它在微博上求助各路PS大神，请它玩坏

代码进行时

HTML代码如下：

<li>       <img src="" alt="" />     <p></p> </li>   

css代码如下

.item li {     position: relative; width: 240px; height: 180px;  } .item li p {     background-color:#000;     opacity: .8;     background-color: rgba(0, 0, 0, 0.8);     color: #fff;     position: absolute;     bottom:0;     left:0;  } 

貌似我们都习惯用了opacity这个属性来写透明度，所以当我们这么写的时候以为是对的，但其实IE8-的效果如下： 

于是找到了相关opacity的资料，国内的w3c对其解释：设置元素的不透明级别，但是国外的w3c对其的解释：CSS Image Opacity / Transparency，这个属性主要是针对图片来设置的透明度，而很少对于某一个元素整体进行不透明度的处理。对此，w3c对其的解释是：应用此属性的子孩子不会继承该属性值，但是其会影响到整个元素所处的区域透明度，包括它的内容。因此此处用opacity显然是不明确的。