css3阴影被遮罩后面的div给遮住了！

最新推荐文章于 2024-08-25 20:15:05 发布
最新推荐文章于 2024-08-25 20:15:05 发布
阅读量1.2w 收藏 1
点赞数 3
分类专栏： css 文章标签： box-shadow css3 阴影遮罩
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011456552/article/details/52398159
版权
今天在写页面的时候，页面里面有个阴影的效果。如图：（为了显示更明显，我改了一下颜色，加宽了距离）


但是在页面书写的时候，怎么也看见阴影的效果，查看代码也生效了。


后来我把下面的div 用margin-top属性撑开，看到了原因，原来是下面的div给遮住了。


后来，我想用z-index的方法提高层级，但是很遗憾，还是失败了！


也尝试了用伪类去做，但是结果不尽人意，而且代码量大。后来，我想到了绝对定位和相对定位，就完美的解决了!

这样的有一个局限性，就是如果下面的div也是相对定位的话，你就需要对有阴影的div 写上z-index的属性了。

下面我付上自己的代码，有兴趣的同学可以 审查元素，然后把 navbar的 position属性删除。看看效果！



沈志勇说
关注
专栏目录
css3遮盖,关于css3的阴影遮盖问题的小研究
weixin_29771573的博客
08-03 729
今日在写一个阴影效果的时候遇到了一个小问题,不多说,上代码div {width: 100px;height: 100px;background: #e3e3e3;border: 1px solid #333;box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);}可以看到,下方的阴影总被遮挡,但如果我想要这种效果应该怎么实现呢刚开始我想到的是z-index,是不是改一下z...
HTML CSS实现 轮播图 遮罩层
m0_61700036的博客
11-08 1332
目录 轮播图 遮罩层 轮播图 轮播图：顾名思义，轮流播放的广告图。它是由网页banner进化而来，通常放在屏幕最显眼的位置，以大图显示。随着互联网的发展，网页中需要推广的信息越来越多，宣传信息都欲占据黄金位置，最后相互妥协，轮播图应运而生。总而言之，轮播图就是可以切换的一块信息。 //css 代码 .main { border: 2px solid black; position: absolute; ..
css写阴影被后边元素遮挡
zqyzqy22的博客
07-31 3801
css写阴影被后边元素遮挡欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 解决：...
揭开CSS遮罩术：mask与-webkit-mask属性深度解析
最新发布
2401_85760095的博客
08-25 834
CSS的mask属性是一种强大的工具，它允许开发者将图像或渐变用作遮罩层，以隐藏或显示元素的特定部分。属性是其对应的Webkit前缀版本，用于在基于Webkit的浏览器中实现相同的效果。本文将深入探讨mask和属性的使用方法，包括如何使用图像、渐变和CSS代码来创建遮罩效果。遮罩是一种图形效果，可以控制元素的可见部分，类似于在元素上放置一张具有透明度的“面具”。
前端CSS样式 box-shadow阴影被覆盖
不想写代码的程序猿
08-12 4126
使用box-shadow可以给元素加上一个阴影的效果。 box-shadow: h-shadow, v-shadow, blur, spread, color, inset 参数详细解释： h-shadow 必需的。水平阴影的位置。允许负值 v-shadow 必需的。垂直阴影的位置。允许负值 blur 可选。模糊距离 spread 可选。阴影的大小 color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表 inset 可选。从外层的阴影（开始时）改变阴...
box-shadow 被其他div遮住 shadow was hidden/covered by another div
weixin_30337251的博客
02-17 250
使用z-index 来处理 (z-index必须在使用了position的情况下才有效) 参考http://stackoverflow.com/questions/5505118/css-box-shadow-hidden-z-index-does-not-fix <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//E...
你所不知道的 CSS 阴影技巧与细节
前端大全
11-12 658
（给前端大全加星标，提升前端技能）作者：伯乐在线 - chokcocohttp://web.jobbole.com/95413/关于 CSS 阴影，之前已经有写过一篇，b...
CSS3 mask 遮罩的具体使用方法
09-24
在CSS3中，`mask`属性提供了一种强大的机制，允许开发者通过定义遮罩图像来隐藏或显示元素的一部分。这个特性对于创建动态效果、复杂的图形设计以及交互式用户体验非常有用。接下来，我们将深入探讨`mask`属性的各个...
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
10-22
- **隐藏***t控件**: 因为`div`层可能无法遮住select控件，需要特殊处理，比如使用隐藏***t控件的方法来避免遮罩问题。 #### 实现步骤： 1. 使用`window.onload`函数，确保在页面加载完毕后执行JavaScript代码。 2....
给页面中某个单独的div添加遮罩层
weixin_43652811的博客
04-24 2952
给页面中某个单独的div添加遮罩层 CSS!部分： html部分： JavaScript部分： 结果： 在表格heihei加载完之前有执行div(qwer)的这部分遮罩层（floatLayer）。 下面是源码： CSS： HTML： 橙色表示人员信息已变动，绿色表示人员信息未变动 </div> </form> JavaScript： 部分1： conso...
CSS解决box-shadow被紧邻的元素遮挡 div被遮挡
qibian1的博客
01-24 1498
CSS解决box-shadow被紧邻的元素遮挡 div被遮挡_瓜瓜的笔记的博客-CSDN博客_css阴影被外面的盒子盖住 .gantt_task_line.gantt_selected { box-shadow: 0 0 5px #299cb4; z-index:1; }
css遮罩层从下往上_CSS优秀起来真没JS什么事
weixin_39811842的博客
11-20 365
原文：The State of CSS Reflections 说明：为方便读者理解，本文采用意译，非直译；其次，原文极长，作者还给出了浏览器兼容方案，本译文重点介绍box-reflex属性的作用效果，不阐述兼容问题，有兴趣的读者可以点击原文阅读，谢谢～ 最后：翻译不易，译文求Star: //github.com/qiud...文章目录基础代码定位栅栏-webkit-box-reflect动画最...
html-覆盖在div上的虚影
lxfHaHaHa的博客
07-30 1687
有时候要实现这种效果，在一个div上加一层灰色的幕布,然后下面的都不能点击把这行代码放进那个div就好了： <div style="display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: rgba(31,48,51,.5);z-index: 120;"></div>效果：
鼠标悬停阴影的效果被旁边div挡住的解决办法
Williams山石的博客
09-04 874
需求要求鼠标悬停某个图片上有阴影效果，但阴影被旁边相邻的div挡住了，如图所示。给悬停的这块div增加2个css属性。一直写后端，前端的都忘了，记录一下。
html阴影被遮挡,关于css3的阴影遮盖问题的小研究
weixin_39957318的博客
06-23 818
今日在写一个阴影效果的时候遇到了一个小问题,不多说,上代码div {width: 100px;height: 100px;background: #e3e3e3;border: 1px solid #333;box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);}可以看到,下方的阴影总被遮挡,但如果我想要这种效果应该怎么实现呢刚开始我想到的是z-index,是不是改一下z...
css阴影的box-shadow
qq_45117943的博客
08-09 482
** box-shadow是css3里面新增的属性 ** 在开发中通常的配置参数说明： h-shadow 必需。水平阴影的位置。允许负值。 v-shadow 必需。垂直阴影的位置。允许负值。 blur 可选。模糊距离。 spread 可选。阴影的尺寸。 color 可选。阴影的颜色。请参阅 CSS 颜色值。 inset 可选。将外部阴影 (outset) 改为内部阴影。默认outset 通常配置为box-shadow：1px 1px 2px 2px red 。 参数顺序为：水平偏移，垂直偏移，模糊
CSS解决box-shadow被紧邻的元素遮挡 div被遮挡
qq_37233816的博客
03-27 8489
CSS解决box-shadow被紧邻的元素遮挡 div被遮挡 如图所示 B 元素的边缘阴影被紧贴的AC元素遮挡 AC 元素使用相同的css class，B比AC多一个 selected class。 由于div的顺序不同，导致 B 的阴影被遮挡。 class selected 原代码： .gantt_task_line.gantt_selected { box-shadow: 0 0 5...
CSS实现一个盒子遮盖另一个盒子的效果
比起未来可期，我更喜欢如约而至
11-24 7932
需求分析 需要实现如下图所示效果，盒子A被盒子B遮盖一部分 需求实现 我们知道，盒子重叠问题可以用“子绝父相”来解决。父盒子设置为相对定位，子盒子设定为绝对定位。 然后我们再设置对应的top 或 bottom达到效果。 但是我这里，子绝父相，会使B盒子直接跑到页面顶部，然后我把父盒子的position取消掉，就可以了。 设定B盒子的堆叠顺序z-index：999，默认最高（拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。）否则，B盒子还是不会遮盖掉A盒子 这里我们交换了A B盒子代码的顺序，这
[css] box-shadow层级问题-相邻元素背景遮盖了阴影
qq_14993591的博客
07-21 781
当box-background元素没有给背景颜色时，box-shadow的阴影可以正常显示当box-background元素给定一个背景色之后，box-shadow的阴影就没有了。
uniapp遮罩层遮住tabbar上
05-04
在Uniapp中，可以通过使用CSS样式来实现遮罩层遮住tabbar上的效果。具体实现方法如下： 1. 在页面中添加一个遮罩层的div元素，设置其样式如下： ```css .mask { position: fixed; top: 0; left: 0; bottom: 0;...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值