当前位置：首页 - 正文

CSS实现背景透明，Opacity定义了有背景的盒子透明度，但里面的文字也跟着透明，我郁闷了。。。

发布网友发布时间：2022-04-06 10:56

共3个回答

热心网友时间：2022-04-06 12:25

嗯，这肯定的，建议把结构分开。如我这段代码。

<!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。这样。就没问题了

热心网友时间：2022-04-06 13:43

原因是他们是一个整体。
盒子的子元素进行相对定位一下就解决问题了。
即子元素加上：position:relative

热心网友时间：2022-04-06 15:18

我把盒子的背景色设置成了background-color: rgba(255,255,255,.3);
不用opacity就可以了，不知道跟你的情况一样不一样

声明：本网页内容为用户发布，旨在传播知识，不代表本网认同其观点，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。
E-MAIL:11247931@qq.com

焦点

CSS实现背景透明，Opacity定义了有背景的盒子透明度，但里面的文字也跟着透明，我郁闷了。。。

最新推荐

猜你喜欢

热门推荐