CSS实现背景透明，Opacity定义了有背景的盒子透明度，但里面的文字也跟着透明，我郁闷了。。。
3个回答
展开全部
嗯，这肯定的，建议把结构分开。如我这段代码。
<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{margin:0;padding:0;}
.warp {width:300px;height:300px;margin:0 auto;position:relative;}
.opacity{background:#000;opacity:0.3;filter:alpha(opacity=30);width:300px;height:300px;position:absolute;top:0;left:0;z-index:0;}
p{ width:300px;text-align:center;line-height:300px;position:relative;z-index:1;color:#f00;}
</style>
</head>
<body>
<div class="warp">
<div class="opacity"></div>
<p>这是要透明的文字</p>
</div>
</body>
</html>
把要透明的层和文字剥离分开，父层relative，子层全部absolute。这样。就没问题了
<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{margin:0;padding:0;}
.warp {width:300px;height:300px;margin:0 auto;position:relative;}
.opacity{background:#000;opacity:0.3;filter:alpha(opacity=30);width:300px;height:300px;position:absolute;top:0;left:0;z-index:0;}
p{ width:300px;text-align:center;line-height:300px;position:relative;z-index:1;color:#f00;}
</style>
</head>
<body>
<div class="warp">
<div class="opacity"></div>
<p>这是要透明的文字</p>
</div>
</body>
</html>
把要透明的层和文字剥离分开，父层relative，子层全部absolute。这样。就没问题了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
原因是他们是一个整体。
盒子的子元素进行相对定位一下就解决问题了。
即子元素加上：position:relative
盒子的子元素进行相对定位一下就解决问题了。
即子元素加上：position:relative
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
我把盒子的背景色设置成了background-color: rgba(255,255,255,.3);
不用opacity就可以了，不知道跟你的情况一样不一样
不用opacity就可以了，不知道跟你的情况一样不一样
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
