父元素opacity属性对子元素的影响(子元素设置opacity无效)
属性 设置 元素 影响 无效 opacity
2023-06-13 09:11:46 时间
大家好,又见面了,我是你们的朋友全栈君。
问题来源于实践
这段时间做了一个项目优化,对于原有的内容进行了重新设计实现,其中一项就是对于label标签添加hover层进行解释说明,最常用的办法及时label的容器设置relative,然后hover层作为它的子元素设置absolute,然后在使用label的hover伪类来控制hover层的显示和隐藏,这其中一个要求及时hover层必定要求能够遮住页面中其他的元素,所以最常用的办法是设置它的背景颜色,然后让它的z-index处于合理的位置,一切都是这样设计的,但是最终的效果却出现了hover层设置bg为#fff的时候,hover层显示时还是会把底部内容给透出来,第一反应就是opacity设置为1,但是还是没有效果(因为背景为白色,所以有点坑)
最终问题定位在父元素的opacity属性设置为不为1的值导致的,这样即使hover层(作为子元素)设置了bg和opacity为1,也依然会存在一定的透明度。
testcode:
<style type='text/css'>
.container{
width:400px;
height: 400px;
border:1px solid red;
border-radius: 8px;
position: relative;
opacity: 0.5;
}
.child{
position: absolute;
border:1px solid gray;
border-radius: 6px;
width:200px;
height: 200px;
bottom: -180px;
opacity: 1;
font-weight: bold;
background: #0000ff;
}
</style>
</head>
<body>
<div class="container">
<h2>this is a container with opacity : 0.5</h2>
<div class="child">
this is child dom with opacity :1
</div>
</div>
<h3 color='black'>this is a dom covered by child width color : black </h3>
</body>
demo:
测试结果和问题排查之后的结果一致(设置父元素的opacity为1通过了测试),父元素的opacity会影响到子元素,即使子元素自定义了opacity属性;还发现最后元素遮住了字体之后,背景颜色还能透给底部的文字,相当于底部内容文字形成了一个遮罩的效果,是不是可以用来设计内容呢?
总结:在设置opacity时,需要排查父元素是否已经设置,需要考虑对于元素中所包含的子元素的影响
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/141518.html原文链接:https://javaforall.cn
相关文章
- 使用 Servlet 设置 cookie 的 SameSite 属性
- 软件方法(下)第8章分析之分析类图—知识篇Part10-审查类和属性2
- 解决HTML select控件 设置属性 disabled 后无法向后台传值的方法
- css3有哪些新增属性?(回顾)
- 【 iOS 应用开发 】 UIKit 控件 ( UIView 属性 | storyboard 设置 | 模拟器 | 拖线关联 | tag | 软键盘操作 | 颜色值 | 代码生成控件 | 动画设置 )
- 【短视频运营】短视频剪辑 ⑤ ( 视频素材使用 | 设置插入后的视频素材属性 | 设置画面 | 设置音频 | 设置变速 | 设置动画 | 设置调节 )
- 【Unity3D】游戏物体操作 ② ( 3D 原生物体 | 立方体 | 球体 | 平面 | 物体移动 | 沿坐标轴移动 | 沿坐标平面移动 | 在 Inspector 检查器窗口设置坐标属性 )
- PHP去除html的宽高属性的正则表达式详解编程语言
- JSP application.removeAttribute()方法:移除指定属性
- JSP Response.setAttibute()方法:设置指定名称的属性值
- JS元素属性的设置、获取和删除
- MySQL计算两属性差值(MySQL两属性相减)
- javascript下判断一个对象是否具有指定名称的属性的的代码
- HTML5之lang属性与dir属性的详解
- 浅析js设置控件的readonly与enabled属性问题
- JS将所有对象s的属性复制给对象r(原生js+jquery)
- jQuery获取选中内容及设置元素属性的方法