opacity属性会发生穿透，怎么办？

原创 于 2022-12-20 10:57:50 发布 · 525 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #前端 #css

本文探讨了CSS中的opacity属性如何影响父级及子元素的透明度，并提出了使用rgba背景色以及在:active状态下替代方案的建议。为避免透明度穿透问题，可以考虑使用rgba颜色值，或者在特定情况下利用伪元素:before创建遮罩层。

opacity属性如果放在父标签，会影响父标签以及子标签，会发生透明度穿透，如果是应用在背景色的话，可以改成rgba，如果是应用在:active，建议更换成背景色或边框；实在不行加一个:before做一个遮罩层也可以

css如何设置透明度和opacity覆盖子元素怎么办
FengxingBilly的博客
05-09 1173
项目场景： css通过属性opacity:1%~100%设置元素透明度，但是opacity会将整个div包括内部的子元素都设置成该透明度，怎么改都改不了 解决方案： 要想设置内部元素透明度就不要用opacity属性，巧妙的运用: background: rgba(0,0,0,0.4); 颜色随便取，最后一个参数0.4就是用来设置透明度的，代表着40%的透明度 ...
css 解决透明度穿透问题
u013141712的专栏
08-04 2090
一般情况下，透明度设置 opacity:0.6; 会导致子元素继承 这个值，即使设置了opacity: 1 也是在原来0.6的基础上实现的透明，所以想要解决这个问题，需要改变思路！ background: rgba(24, 23, 23, 0.5); 去实现透明度，就不会被继承 方法2： 设置opacity: 的时候，单独给他弄个div，让他定位也可以，不要让他有子元素 ...
css中如何使颜色透明度
haojiao730的博客
02-09 815
css中使颜色透明度的方法：首先创建一个HTML示例文件；然后创建一个div；最后通过“opacity:0.5;”属性设置元素背景的透明度即可。 本教程操作环境：windows7系统、css3版，该方法适用于所有品牌电脑。 推荐：《css视频教程》 CSS颜色透明度 一、设置元素背景透明度 opacity可以用来设置元素背景的透明度；它需要0~1之间的值 0表示完全透明（opacity:0）； 1表示完全不透明（opacity:1）； 0.5表示半透明（opacity:0.5）； 代码演示： 1 2 3 4
弹窗的点击空白关闭，背景虚化，防止滚动穿透
weixin_44335985的博客
08-17 462
1.点击空白关闭 最简单的vue <div @click="tan">点击谈窗2</div> <div class="tanchuang" v-if="showTan" @click="Close"> <div class="content" @click.stop="toGo"> //阻止冒泡 这是很重要的弹窗内容 </div> </div> tan() {
某元素设置了opacity，覆盖在它上面的元素怎样不透明
莫宛的博客
10-09 1671
一、问题描述 为某元素设置了opacity:0.4; 覆盖在它顶层的元素也半透明。 二、让下拉部分不透明的方法 position: absolute;background-color:#fff;z-index:10; 三、方法缺陷两元素嵌套情况下的解决办法 仅设置背景半透明，通过rgba()设置。
7-盒子模型
w_45678910的博客
12-21 987
盒子模型 盒子模型就是在HTML中盛装元素内容的容器。 每个盒子模型都由元素的内容（content）、内边距（padding）、边框（border） 和 外边距（ margin） 组成。 div标记 <div>标记是一个块容器标记。 可以将网页分割为独立的部分，实现网页的规划和布局。 大多数HTML标记都可以嵌套在div标记中，div中还可以嵌套多层div标记。 div可以替代大多数的块级文本标记。 盒子的宽和高 盒子的总宽度=width+左右内边距之和+左右边框宽度之和+左
el-radio-group 怎么设置在disabled属性为true时，显示颜色不发生变化
最新发布
05-02
用户可能在使用el-radio-group组件时，当设置为disabled状态后，默认的样式会变灰或者颜色改变，但用户希望即使禁用状态，颜色也能保持原来的样式，比如选中后的颜色不变。 首先，我应该回忆一下Element UI的el-...
vue前端开发，el-radio-group 怎么设置在disabled属性为true时，显示颜色不发生变化
05-01
例如，自定义样式是否会影响aria属性或其他功能。 接下来，需要详细解释如何覆盖Element UI的默认样式，特别是禁用状态下的各个部分，包括单选框的外框、内勾、标签文字等。可能需要分步骤说明，每个CSS规则的作用...
js img穿透
04-03
在处理 `img` 标签的穿透问题时，通常可以通过调整 CSS 属性或者 DOM 的结构来实现目标。以下是几种常见的解决方案： #### 方法一：使用 `pointer-events` 通过设置 `pointer-events: none;` 可以让指定的元素不再...
react实现点击穿透
02-28
#### 添加 CSS 属性 `pointer-events:none;` 如果目标是在特定条件下临时禁用某个DOM节点上的所有指针事件，则可以在样式表里设置`.modal-open { pointer-events: none }`这样的规则，并且只应用于需要的时候。 ``...
2023大厂高频面试题之CSS篇
zag666的博客
05-18 2010
css的position属性取值 css选择器优先级和权重 box-sizing属性 CSS 盒子模型 CSS实现三角形 CSS布局 弹性布局display:flex 实现一个垂直水平居中 隐藏页面元素的方法 style-components HTML脱离文档流的方法 block，inline和inlinke-block transition与animation区别...
css使用opacity会导致子元素变透明问题
weixin_44479794的博客
02-24 902
我们使用opacity时，会导致子元素一起变透明 解决方法：使用background-color: rgba(0,0,0,0.35);设置背景就可以了
CSS Opacity属性对层叠上下文的影响
陈春春的技术博客
02-20 2874
今天在遇到一个opacity过渡的时候，遇到了一个奇怪的问题： 父元素设置了opacity。 子元素设置了z-index:-1 <div class="box" style="opacity:.7"> <img style="position:relative;z-index:-1" src="http://www.gbtags.com/gb/laitu/2
display设置为none、visibility设置为hidden和opcitity设置为0的区别
远方
11-30 735
display:none；是将元素隐藏起来，会改变页面的布局，可以理解为在页面中把元素删掉。 visibility:hidden;和opcitity:0;只是将元素隐藏起来，并不会改变页面的布局。 visibility:hidden;如果元素上有已经绑定的事件，隐藏后事件不会被触发。 opcitity:0;如果该元素上已经绑定一些事件，如click事件，隐藏后，点击该区域，事件也能够被触发。...
如何防止css属性opacity影响子元素
AzeShinja的博客
08-26 1566
在父元素的opacity改为background写法即可 background: #0080ff; opacity: 0.1; // 等同于下方 background: rgba(#0080ff, 0.1);
CSS opacity设置透明度影响子元素的解决办法
immocha的博客
12-27 2730
当我们设置一个元素 .item { opacity:0.5 } 其内部的opacity为1的子元素也同时具有了0.5的透明度 解决办法 .item { background: rgba(0,0,0,0.3) } 这样设置就不会影响子元素了。 ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值