CSS-CSS如何实现背景透明文字不透明的效果

CSS-CSS如何实现背景透明文字不透明的效果

归属感 发布于 2017-07-15 字数 768 浏览 1123 回复 4

要实现一个下拉菜单的半透明效果,首先这个下拉菜单的位置是相对于父导航的li,我给这个下拉菜单设置了50%的透明度,但是上面的文字也被透明了,如何让背景透明文字不透明呢?要兼容主流浏览器的,请不要粘贴代码,我要具体的实现。

<ul>
<li>
<span>关于公司</span>
<div><!--下拉菜单-->
<ul>
<li>公司服务</li>
<li>公司简介</li>
<li>发展历程</li>
</ul>
</div>
</li>
<li>新闻中心</li>
<li>公司产品</li>
<li>联系我们</li>
</ul>

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

浮生未歇 2017-10-13 4 楼

先进的浏览器,可以使用rgba格式背景色。

不过对于ie需要滤镜。

所以目前兼容性最好的,还是使用png图片,只需要对ie6兼容即可。
还有一个方法,是把2个元素叠加起来,1个是滤镜透明的背景层,一个是内容层。

灵芸 2017-08-08 3 楼

<div id="header" role="banner">
<div id="nav-main" role="navigation">
<ul>
<li class="first"> <a href="/">帝思迈</a>
<ul>
<li class="first"><a href="/jianjie/">公司介绍</a></li>
<li><a href="/guanlic/">公司领导</a></li>
<li><a href="/kongqiyuan/">主要产品</a></li>
<li><a href="/zhanhui/">公司展会</a></li>
<li><a href="/dayi/">与您互动</a></li>
<li><a href="/zhaopin/">人才计划</a></li>
</ul>
</li>
</ul>
</div>
<!--[if lte IE 6]>
<script type="text/javascript">
$("#nav-main li").hover(function(){
$(this).addClass("sfHover");
}, function(){
$(this).removeClass("sfHover");
});
</script>
<![endif]-->
</div>

CSS 样式请浏览:http://www.dismy.cn/my_css/base.css
效果请浏览网站: http://www.dismy.cn/

虐人心 2017-07-31 2 楼

一个透明背景的浮动层,盖在具有文字层的上方,当然文字层背景必须是透明的(建议使用Span标签)。
或者反一反。。。
我以前搞过这事情,现在忘了应该是哪个在上面。

晚风撩人 2017-07-19 1 楼

使用半透明的png图片来作为背景。如新浪微博。ie6下的话,使用一个png.js也许也能行。