使用opacity属性后，该块的层级会上升

已于 2024-08-28 14:28:16 修改
阅读量207 收藏
点赞数 1
分类专栏： Css 文章标签： css3 前端
于 2024-08-27 10:16:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_64562561/article/details/141595647
版权

块级元素会覆盖上面

发现是opacity的原因

解决办法

使用rgba

background: rgba(255, 255, 255 ,0.8);

洗了shuan了
关注
专栏目录
CSS3中的opacity属性使用教程
09-25
1. opacity会影响元素及其所有子元素的透明度，如果只想改变特定部分的透明度，建议使用RGBA。 2. 考虑到向后兼容性，总是为老版本的IE提供filter滤镜属性。 3. 避免在需要交互或点击事件的元素上过度使用高透明度，...
解决CSS3的opacity属性带来的层叠顺序问题
01-19
如果两个层发生了重叠，使用了 opacity 属性并且属性值小于1的层，会覆盖掉后面的层。于是动手做了个实验，来验证 opacity 的层次。 网页中的层叠规律是这样的：如果两个层都没有定义 position 属性为 absolute 或者...
详解CSS3的opacity属性设置透明效果的用法
01-21
CSS3 opacity 属性的功能是用来控制网页元素的透明效果（调整不透明度），早期网页设计常常会用到许多的透明效果，通常都是透过 png 图层来制作透明的感觉，现在网页设计师可以使用 CSS3 opacity 属性来轻松的达到...
Layout 布局组件快速搭建
赵士杰——成功并非一蹴而就，而是在持之以恒的努力中逐渐实现。
09-13 1211
Layout 布局组件快速搭建： 1. 设置主题样式变量 2. 封装公共布局组件 3. 经典布局 4. 水平布局 5. 响应式布局 6. 搭建 Layout 布局组件 7. 添加 Layout 路由配置 8. 启动项目
CSS学习17--CSS3 过渡、2D变形、3D变形、动画
qq_54641174的博客
09-10 1094
CSS3 过渡、2D变形、3D变形、动画
div内英文不换行问题以及解决方案
mzp520lf的博客
09-10 802
div设置宽度以后，如果div中放的是中文，默认文字超过div宽度会自动换行，如果是英文，则默认是不换行的，即会超出div的宽度继续显示。这种情况，需要我们通过属性值进行强制换行。/*--只对英文起作用，以单词作为换行依据*//*不换行，超出部分隐藏且以省略号形式出现*//*只对英文起作用，以字母作为换行依据*//*只对中文起作用，强制换行*/使用上述属性一定要指定容器的宽度。/*强制不换行，都起作用*/
打造古风炫酷个人网页：用HTML和CSS3传递笔墨韵味
m0_61118741的博客
09-13 599
简洁的页面布局：保持优雅和对称在古风设计中，布局的对称性非常重要。通过左右平衡的内容布局，配合留白来减少页面的视觉噪音。
-webkit-box-reflect属性与倒影效果的实现
最新发布
读心悦
09-13 262
是一个非标准的 CSS 属性，主要用于在 WebKit 浏览器（如 Chrome 和 Safari）中创建元素的倒影效果。这个属性并不是 CSS 规范的一部分，但在实践中经常被用来实现简单而有趣的视觉效果。
《响应式 Web 设计：纯 HTML 和 CSS 的实现技巧》
asd4353012的博客
09-06 1783
响应式 Web 设计是现代网页设计的重要趋势，它可以确保网页在不同设备上都能提供良好的用户体验。在实现响应式 Web 设计时，需要掌握媒体查询、弹性布局、流式布局等技术，同时还需要遵循一些最佳实践，如优先考虑移动设备、保持简洁的布局、优化图像和媒体资源、使用响应式字体和提供良好的用户体验等。响应式 Web 设计可以确保网页在不同设备上都能呈现出最佳的布局和样式，满足用户的需求。在实现响应式 Web 设计后，需要在不同的设备上进行测试，确保网页在各种设备上都能正常显示和交互。可以使用响应式字体技术，如。
（微服务项目）新闻头条——Day1
weixin_73253843的博客
09-13 676
（微服务项目）新闻头条——Day1
2024伊语IM即时通讯源码/im商城系统/纯源码IM通讯系统安卓+IOS前端纯原生源码
翎风世界
09-10 636
2.4 node安装wget "https://nodejs.org/dist/v12.18.3/node-v12.18.3-linux-x64.tar.xz"资料参考地址：https://www.1234f.com/sj/GitHub/qtym/20240910/677.html。源码下载地址：https://www.123pan.com/s/LA1bVv-5l5Vv。备用下载地址：http://pan.1234f.com:5212/s/5PrS4。api.xxx.com接口。im.xxx.com通讯。
react 基础语法
小白小白从不日别的博客
09-13 1313
React 官方中文文档目前前端最流行的是三大框架：Vue、React、Angularreact是一个用于构建用户界面的 JavaScript 库react官网(Reactreact中文网(React 官方中文文档React 是一个用于构建用户界面（UI，对咱们前端来说，简单理解为：HTML 页面）的 JavaScript 库Vue 是一个渐进式的 JavaScript 框架如果从mvc的角度来看，React仅仅是视图层（V）的解决方案。也就是只负责视图的渲染，并非提供了完整了M和C的功能。
【前端】vue+html+js 实现table表格展示，以及分页按钮添加
weixin_43872912的博客
09-09 494
数据条数太多显示到页面上时可能会渲染较慢，因此需要截取数据进行展示。
在子组件中使用props用于在父组件中给子组件变量设置值
ithongchou的博客
09-13 45
/传给父组件传值到此组件。
项目中遇到的问题
qiao
09-12 335
文件列表中有文件上传功能，点击上传按钮，弹出模态框，在模态框的形式选择文件，进行上传。
JavaScript web API part1
wozhaonue_w的博客
09-09 1677
本文主要总结了JavaScript的webAPI的DOM对象，获取，修改属性，以及事件监听的一部分
AI问答-Vue实例属性/实例方法：$refs、$emit、$attrs、$props、$data...
snowball的博客
09-13 824
在Vue.js中，符号通常用于表示Vue实例或组件上的内置属性和方法，这些被称为“实例属性”或“实例方法”。以下是一些常见的以。
vue如何获取一个元素的基本信息
致未来的你。的博客
09-09 257
假如说我们打印是一个myElement.value的形式，我们可以把该元素的DOM结构打印在我们的控制台上，但是我们想查看这元素的基本信息的时候，这里只需要打印这个定义的变量就好，这样一边看一遍获取自己想要的一些信息。PS：代码全部使用Vue3和setup语法糖来写的。这里，我们在实验的时候。
前端开发中 em/px/rem/vh/vw区别
乐辞的博客
09-09 1505
前端开发中 em/px/rem/vh/vw区别？传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，且拥有比较良好的兼容性；从CSS3开始，浏览器对计量单位的支持又提升到了另外一个境界，新增了rem、vh、vw、vm等一些新的计量单位；利用这些新的单位开发出比较良好的响应式页面，适应多种不同分辨率的终端，包括移动设备等
使用CSS的opacity属性来实现loading效果
06-01
是的，使用CSS的opacity属性可以实现loading效果，并且避免闪烁问题。具体实现方法如下： 1. 在需要应用loading效果的DOM元素上添加一个类，比如 "loading" 2. 在CSS中定义这个类的样式，设置opacity为0.5或者其他透明度值，同时设置pointer-events为none，这个属性可以禁止鼠标事件触发到这个元素，防止用户在loading期间进行操作。 ```css .loading { opacity: 0.5; pointer-events: none; } ``` 3. 在需要应用loading效果的元素上使用v-bind绑定class，根据需要动态添加或删除"loading"类。 ```html <div :class="{loading: isLoading}"> <!-- 其他内容 --> </div> ``` 这样，在isLoading的值为true时，这个元素就会添加"loading"类，从而实现loading效果。同时，由于opacity属性不会导致DOM节点的移除和重新插入，所以也避免了闪烁的问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值