css实现背景透明文字不透明

设置元素的透明度:

-moz-opacity:0.8; /*在Firefox中设置元素透明度

filter: alpha(opacity=80); /*ie使用滤镜设置透明

但是当我们对一个标签设置背景的透明度时,往往我们并不希望该标签上的文字图片也变成半透明了。

例如:

不透明

div{-moz-opacity:0.3;filter:alpha(opacity=30);background:#000;width:500px;

height:500px;color:#F30; font-size:32px; font-weight:bold; }

可以很明显的看出文字也被半透明的,这是我们不想看到的效果。

以前我曾经是绝对定位的方法解决这个问题,也就是现在的p并不是div的子元素。

不透明

这样div的半透明效果也就不会影响到元素p了。最后在将p定位到需要的位置。

但是很多时候这样的标签并不是很合理,有可能还会多浪费几个标签。

下面的这种方法就可以解决上面的问题了:

div{background:rgba(0,0,0,0.2) none repeat scroll !important; /*实现FF背景透明,文字不透明*/

background:#000; filter:Alpha(opacity=20);/*实现IE背景透明*/

width:500px; height:500px; color:#F30; font-size:32px; font-weight:bold;}

div p{ position:relative;}/*实现IE文字不透明*/

火狐我们直接用rgba颜色就可以解决子标签跟着半透明的问题了,但是ie还不是能很好的支持。

所以我们给不想被透明的标签设置一个定位属性,问题接能解决了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 6,602评论 0 8
  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 8,401评论 0 11
  • 题石: 濯发水云间 文/赵春苗 莫道幽思何所似,女儿濯发水...
    鸟人的羽毛阅读 1,531评论 0 2
  • 一切都有一个开始! 有开始,就有结束!何时结束? 有生,即有死!有苦,就有乐!有欢笑,就有痛苦!有开心,就有郁闷!...
    吴桂斌阅读 1,738评论 0 2

友情链接更多精彩内容