CSS实现背景透明，Opacity定义了有背景的盒子透明度，但里面的文字也跟着透明，我郁闷了。。。
答案:3 悬赏:20 手机版
解决时间 2022-01-01 02:34
- 提问者网友：自食苦果
- 2021-12-31 18:25
CSS实现背景透明，Opacity定义了有背景的盒子透明度，但里面的文字也跟着透明，我郁闷了。。。
最佳答案
- 五星知识达人网友：你哪知我潦倒为你
- 2022-01-06 13:54
嗯，这肯定的，建议把结构分开。如我这段代码。
<!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。这样。就没问题了
全部回答
- 1楼网友：你哪知我潦倒为你
- 2022-01-06 16:05
原因是他们是一个整体。
盒子的子元素进行相对定位一下就解决问题了。
即子元素加上：position:relative
我要举报
如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！
点此我要举报以上问答信息
大家都在看
推荐资讯