901web前端博客

人生就像一副复杂拼图
每个人总有属於自己的记忆碎片
Theme By 网上下载

联系我

RSS

六月 05, 2015

让透明div里的文字不透明

最近在工作中遇到一个问题,我在div里写上文字,当我把div变为半透明的时候,里面的文字也会随之透明。

<div class="box">
    这是一段不应该透明的文字
</div>

.box{width: 300px;height: 25px;line-height:25px;background: red;opacity: 0.5}

这样我的文字几乎看不清,这当然不是我想要的,随即去查询资料,找到了一个解决办法,使用css3的属性:

.box{width: 300px;height: 25px;line-height:25px;background: rgba(255,0,0,0.5);}

这种方式是利用css3的新属性,更改背景的透明度,这样就不会影响到内容的透明度,但是有一个问题就是目前很多浏览器对css3的属性不支持,没办法,为了兼容该死的IE,还是琢磨出兼容的写法吧。

<div class="box"></div>  //专门用来做背景
<div class="text">
	这是一段不应该透明的文字
</div>
.box{width: 300px;height: 25px;font-size: 24px;background: red;opacity: 0.5;position: absolute;left: 0;top: 0;}
.text{position: absolute;z-index: 10;left: 0;top: 0;}

把文字和背景放在不同的层里面,目前也只有这个笨方法来实现了,等到脑残的不标准的IE滚出浏览器界的时候,我们的CSS3就能派上大用场了。

其中我自己制作的幼儿园网站的专题页面就有这种效果的需求.测试连接地址:

http://pyb.901web.com/index.php?m=special&c=index&specialid=9

相关文章

返回