实现CSS背景透明,文字不透明(兼容各浏览器)

在工作中经常遇到一些小问题,只是没有总结起来,就忘记了,这次又撞墙了,必须记录下来,一来给自己做个小总结,提个醒,最近变懒了,再不努力就要倒挂了;二来是因为在网络上并没有完整的解决方案,希望可以帮助到遇到此类问题的朋友,今天主要讲解背景透明的解决方案,共勉~

方法:需要整这么一个透明层,里面的文字不透明,但是css做不到,可以用下方法解决,(用两个div一个是背景层 一个是文字层,用定位搞定)

html代码

<li><div></div><p style=”color:#F00;”>1</p></li>

css代码

.tabPanel .panes .pane>ul>li>p { position: absolute; top: 0px; }
.tabPanel .panes .pane>ul>li>div { width: 257px; height: 115px; background: #0F6; margin-right: 50px; transition: all 0.3s ease-out 0s; }

8

注意:在 FF/Chrome 等较新的浏览器中可以使用css属性background-color的rgba轻松实现背景透明,而文字保持不透明。而IE6/7/8浏览器不支持 rgba,只有使用IE的专属滤镜filter:Alpha来实现,但是这样写法会把文字也变为透明,因此只有在透明容器的子节点(文本节点除外)内设置 position:relative才能不继承其父元素的透明滤镜。

设计干货- www.shejigh.com

设计干货是一个优秀的主题,极致后台体验,无插件,集成会员系统
设计干货 » 实现CSS背景透明,文字不透明(兼容各浏览器)

发表评论

提供最优质的资源集合

立即查看 了解详情