只半透明背景不透明文字的CSS写法

作者：佳明妈来源：懒人建站 2010-02-26 人气：

通常直接写filter:alpha(opacity=50) 会把文字一起透明，该CSS写法可以实现只半透明背景不透明文字。提示兼容IE6/IE7/火狐。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>只半透明背景不透明文字的CSS写法-懒人建站</title>
<style type="text/css">
	#container{ border:1px solid #c00; background-color:rgba(212,0,0,0.5);

*background:#f00; *filter:alpha(opacity=50); width:500px; margin:40px auto; line-

height:200%; font-size:14px; padding:14px;}
	#container *{ position:relative;}

</style>
</head>

<body>

<div id="container"><span>我是内容我是内容我是内容我是内容</span></div>
<p>兼容ie6,ie7以及firefox的css透明滤镜，文字不继承其透明属性。</p>

<div style="width:95%; height:auto; display:block; margin:0 auto; margin-top:30px; font-

size:10pt; line-height:150%;">
<span>本代码由<a href="http://www.51xuediannao.com" style="color:#F00;">懒人建站网 收集整

理 我要学电脑.COM →51xuediannao.com</a> </span><br>
<a href="http://www.51xuediannao.com">懒人建站 http://www.51xuediannao.com</a><br /><br/>
<span>我们为您提供-
<a href="http://www.51xuediannao.com/html+css/">HTML+CSS模板</a>，
<a href="http://www.51xuediannao.com/js/">JS代码</a>，
<a href="http://www.51xuediannao.com/JS/texiao/">网页特效</a>，
<a href="http://www.51xuediannao.com/JS/nav/">导航菜单</a>，
<a href="http://www.51xuediannao.com/JS/Slide/">焦点幻灯片<a>，
<a href="http://www.51xuediannao.com/JS/show/">网页欣赏</a>和
<a href="http://www.51xuediannao.com/JS/jiqiao/css/">CSS技巧</a>；</span><br />
<span>懒人建站只收录实用和能提高用户体验的代码</span><br />
<span>我们只想解放出你的部分写代码时间来思考更高层次的设计，而不是要你懒惰、拼凑。</span>
</div>

</body>
</html>

通常直接写filter:alpha(opacity=50) 会把文字一起透明，该CSS写法可以实现只半透明背景不透明文字。提示兼容IE6/IE7/火狐。代码简洁。了了几行：
#container{ border:1px solid #c00; background-color:rgba(212,0,0,0.5);
*background:#f00; *filter:alpha(opacity=50); width:500px; margin:40px auto; line-height:200%; font-size:14px; padding:14px;}
#container *{ position:relative;}

CSS解释：
IE不支持background-color的rgba，而IE只有在透明容器的子节点（文本节点除外）内设置position:relative才能不继承其父记得透明滤镜，只有火狐等浏览器支持rgba。

↓ 查看全文

本文链接：只半透明背景不透明文字的CSS写法https://www.51xuediannao.com/js/texiao/alpha.html

只半透明背景不透明文字的CSS写法由懒人建站收集整理，您可以自由传播，请主动带上本文链接

懒人建站就是免费分享，觉得有用就多来支持一下，没有能帮到您，懒人也只能表示遗憾，希望有一天能帮到您。

只半透明背景不透明文字的CSS写法

只半透明背景不透明文字的CSS写法-最新评论

网页特效-热门文章

网页特效-推荐文章

活跃用户

只半透明背景不透明文字的CSS写法

只半透明背景不透明文字的CSS写法-相关文章

只半透明背景不透明文字的CSS写法-最新评论

网页特效-热门文章

网页特效-推荐文章

活跃用户