如何解决CSS滤镜同时过滤文字的问题

这篇文章主要介绍了关于如何解决css滤镜同时过滤文字的问题,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

初用CSS滤镜的朋友可能会遇到这样的问题:给p套上filter:alpha(opacity=50); 滤镜后,里面的文字也随之半透明,这种情况下,我们该怎么办呢?

经过本人查阅大量资料,实验N次终于找到了一个兼容ie6,ie7,ie8以及firefox的css透明滤镜的方法,且看我举例说明.

html代码: 

解决CSS滤镜同时过滤文字的问题

css代码: 

 #body{ border:1px solid #c00; background-color:rgba(212,0,0,0.5); background:#f00\9; filter:alpha(opacity=10); width:500px; margin:40px auto; line-height:200%; font-size:14px; padding:14px;} 

这样的代码并不能解决过滤文字的问题,想要不过滤文字,就必须在CSS代码里加上这行代码: 

立即学习“前端免费学习笔记(深入)”;

#body *{ position:relative;}

星号是为了让IE6和IE7执行,火狐和IE8就不执行了,火狐本身来讲就不支持IE特有的滤镜功能,所以这里没必要再加星号,怎么样?很简单吧~

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

检测用户浏览器是否支持CSS3的方法

css3实现wifi信号逐渐增强的效果

以上就是如何解决CSS滤镜同时过滤文字的问题的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1610747.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 01:39:54
下一篇 2025年12月24日 01:40:15

相关推荐

  • html中怎么调整图片滤镜效果 CSS滤镜教程

    调整html中图片的滤镜效果主要通过css的filter属性实现。1. 使用blur(radius)进行模糊处理;2. brightness(amount)调整亮度;3. contrast(amount)改变对比度;4. grayscale(amount)转换为灰度图;5. hue-rotate(a…

    2025年12月22日 好文分享
    000
  • 怎么使用JavaScript操作CSS滤镜效果?

    JavaScript操作CSS滤镜可通过修改style.filter、使用CSS变量或切换类名实现;推荐结合transition实现平滑动画,避免频繁修改引发性能问题;通过CSS.supports()检测兼容性并提供回退方案。 JavaScript操作CSS滤镜,说白了就是通过代码去动态改变页面元素…

    2025年12月20日
    100

发表回复

登录后才能评论
关注微信