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

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


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

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

解决方法:

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

效果如图:

相关推荐
xiaoqi9222 分钟前
React Native鸿蒙跨平台实现图片画廊类页面是视觉展示型APP(如摄影类、图库类、设计类APP)的核心载体,其核心需求是实现图片的流畅渲染
javascript·react native·react.js·ecmascript·harmonyos
雪芽蓝域zzs6 分钟前
uniapp 省市区三级联动
前端·javascript·uni-app
Highcharts.js7 分钟前
Next.js 集成 Highcharts 官网文档说明(2025 新版)
开发语言·前端·javascript·react.js·开发文档·next.js·highcharts
总爱写点小BUG9 分钟前
探索 vu-icons:一款轻量级、跨平台的 Vue3 & UniApp SVG 图标库
前端·前端框架·组件库
晚霞的不甘21 分钟前
Flutter for OpenHarmony手势涂鸦画板开发详解
前端·学习·flutter·前端框架·交互
Beginner x_u23 分钟前
JavaScript 核心知识索引(面试向)
开发语言·javascript·面试·八股
We་ct25 分钟前
LeetCode 73. 矩阵置零:原地算法实现与优化解析
前端·算法·leetcode·矩阵·typescript
晚霞的不甘26 分钟前
Flutter for OpenHarmony 实现动态天气与空气质量仪表盘:从 UI 到动画的完整解析
前端·flutter·ui·前端框架·交互
~小仙女~29 分钟前
组件的二次封装
前端·javascript·vue.js
白日梦想家68129 分钟前
JavaScript性能优化实战系列(三篇完整版)
开发语言·javascript·性能优化