css - 如何在 CSS 中使内部 div 不透明度为 1?
问题描述
我正在尝试实现内部 div 不透明度 1,而其父 div 不透明度为 0.5。请找到我的codepen链接
https://codepen.io/SandeshSardar/pen/moVyEy
根据当前结果,即使在应用不透明度 1 后,内部 div 也会获得不透明度 0.5。
<div class="container">
<div class="image">
<div class="green" >
<p>this div also should take opacity </p>
</div>
<div class="middle">
</div>
</div>
.container {
position: relative;
width: 50%;
}
.image {
position: absolute;
opacity: 1;
display: block;
width: 100%;
height: auto;
background: red;
height: 150px;
width: 500px;
}
.middle {
position: absolute;
top: 50%;
left: 50%;
text-align: center;
height: 50px;
width: 50px;
background-color: blue;
}
.container .image {
background: rgba(255,0,0,.3);
}
.container .middle {
opacity: 1;
z-index: 9999;
}
.container .green {
position: absolute;
display: block;
width: 100%;
background: green;
height: 50px;
width: 500px;
}
解决方案
您可以设置父 .image 与
background:rgba(255,0,0,0.5);
和孩子.middle
background:rgba(0,0,255,1);
rgba 的第四个值是不透明度!
编辑:
.container .green {
position: absolute;
display: block;
width: 100%;
background: rgba(0,255,0,1);
height: 50px;
width: 500px;
}
如果您希望 .green 的不透明度为 0.1,请将其更改为 rgba(0,255,0,0.1) 而不是 opacity: 0.1
推荐阅读
- reactjs - 如何在 Tailwind 中更改 svg 元素的颜色
- python - 我需要让一个不和谐的机器人停止它的进程并等待几秒钟,如果人们向它的命令发送垃圾邮件
- mongodb - 在猫鼬中使用“删除”后中间件的问题
- python - Sphinx 文档:覆盖 docutils 指令的部分内容
- javascript - 我正在学习一个教程,但是我的富文本区域的 onclick 侦听器的 javascript 代码在浏览器端 f 没有响应
- java - 已知值时如何删除键+值
- xcode - 缺少 64 位支持 xcode 12.4
- python - 如何在 python 中运行单元测试?
- oracle - 无法并行运行收集统计信息?
- javascript - 是否有一个预制的 javascript 脚本来呈现一个圆形图片,它是可点击的,无论你在哪里点击它都会出现一个 X?(可改变 x,y 位置)