关于实现背景透明文字不透明的解决方案

标签：

最近在做项目的时候遇到实现背景透明文字不透明的解决方法要求的兼容性是ie8+

1.大家豆知道background:rgba(),可以实现背景透明文字不透明但是ie8 不支持background:rgba(); 如果不考虑ie 8 我们可以直接rgba就解决了

2.如果考虑ie8 我的做法是，先说我的做法，再说别人的做法.

3.我的做法是按照设计稿切切一张1px*1px的png透明图片然后background:url(toumingdu.png);这样就会平铺过去，可以很快实现背景透明文字不透明，这种做法我是看到自如租房网(链家网的一个分支)pc端的的一个效果里是这样解决的。

4.最后再说别人的做法，也是我百度的既然写出来我觉得就要通俗易懂越简单越好，直接拿来用就可以，甚至不要问为什么，因为我觉得所有的hack只要记住就可以，当然如果有兴趣可以研究研究万恶的ie！哈哈

5.最后贴代码:解释:必须建立父子关系，把文字(儿子)单独放在一个容器里面

html部分：

<div class="box">
　　<p>adfsdf</p>
</div>

css部分:

.box{
width:100px;
height:100px;
background: #000; 必须写  比如这里是黑色#000和下面的rgba里面的0,0,0对应  因为ie8 不认识rgba
background: rgba(0,0,0,0.7); 必须写  这是现代浏览器的写法    0,0,0对应的是 上面的#000
position: static;  默认就是static可写可不写
*zoom:1;  必须写
filter:Alpha(opacity=70);  ie专属滤镜 也必须写
}
p{
color:#ff0000;
position: relative;   必须写，别人提供的是relative  经过我测试absolute 也可以
}

关于实现背景透明文字不透明的解决方案

标签：

原文地址：http://www.cnblogs.com/hwbweb/p/5493259.html