【CSS】opacity 父元素设置透明度影响子元素显示效果解决方案

复制代码
<div class="father">
    <div class="children">
    </div>
</div>


.father{
    background:#000000,
    opacity:0.6
}

给父元素设置透明度时,子元素显示效果会搜到父元素透明度的影响,如下图

解决方法:

复制代码
.father{
    background:regb(0,0,0,0.6)
}

效果如图:

相关推荐
keyborad pianist2 分钟前
Web开发 Day1
开发语言·前端·css·vue.js·前端框架
Never_Satisfied14 分钟前
在HTML & CSS中,可能导致父元素无法根据子元素的尺寸自动调整大小的情况
前端·css·html
We་ct24 分钟前
LeetCode 101. 对称二叉树:两种解法(递归+迭代)详解
前端·算法·leetcode·链表·typescript
码云数智-大飞28 分钟前
微前端架构落地实战:qiankun vs Module Federation 2026 深度对比与选型指南
前端·架构
IT枫斗者33 分钟前
MyBatis批量插入性能优化:从5分钟到3秒的工程化实践
前端·vue.js·mysql·mongodb·性能优化·mybatis
前端 贾公子1 小时前
深入理解 Vue3 的 v-model 及自定义指令的实现原理(中)
前端·html
Never_Satisfied1 小时前
在HTML & CSS中,img标签固定宽度时,img和图片保持比例缩放
前端·css·html
Cache技术分享1 小时前
327. Java Stream API - 实现 joining() 收集器:从简单到进阶
前端·后端
颜酱1 小时前
滑动窗口算法通关指南:从模板到实战,搞定LeetCode高频题
javascript·后端·算法
咕噜咕噜啦啦1 小时前
JavaScript基础
开发语言·javascript