如何确保子元素不会遮盖插入阴影?

2024-04-08

我有一个div带有一些子元素的元素,我试图应用一个插入框阴影,子元素似乎覆盖了框阴影,这是一个 jfiddle 示例:jsFiddle 演示 http://jsfiddle.net/sightofnick/wdYpv/

如果你拿走background-color on the optn类你会看到那里的插入框阴影,所以我的代码is有效的。所以问题是,如何使子元素出现在盒子阴影下?


遇到同样的问题,找到一半的解决方案(如果你里面没有滚动,效果很好)。

您可以将元素中的背景放置在阴影下,方法是将其放置在 :before 或 :after 伪类内并将其设置为 z-index: -1。它将完成背景部分。

但这会产生新的问题:要定位 :before 元素,您需要将“position:relative;”应用于 .optn 元素如果您应用“位置:相对;”它将开始从 Webkit 浏览器的圆角下方显示。

如果您内部没有滚动条,则可以通过第一个和最后一个 .optn 元素的圆角来修复它,如果您想滚动此内容,那么不幸的是您不能这样做。

无论如何,有一个例子:http://jsfiddle.net/qN99W/ http://jsfiddle.net/qN99W/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何确保子元素不会遮盖插入阴影? 的相关文章

  • 身体动画不流畅

    下面代码中的 spaceShip 在开始按住任何箭头键时移动并不顺利 它移动一步 冻结一瞬间 然后 平稳 地移动 怎样才能让它从一开始就顺利运转 而不是 冻结 My code
  • 为什么我的列表项项目符号与浮动元素重叠

    我有一个 XHTML Strict 页面 我在其中将图像浮动在常规文本段落旁边 一切都很顺利 除非使用列表而不是段落 列表的项目符号与浮动图像重叠 更改列表或列表项的边距没有帮助 边距是从页面左侧开始计算的 但浮动会将列表项推到右侧insi
  • 当共享相同的行和列时,将网格项设置为不重叠

    现在 当两个网格项共享相同的行和列时 它们会相互重叠 div class some grid container div Item 1 div div Item 2 div div 我如何让它们不重叠 当共享相同的行和列时 其行为可能类似于
  • Django:按钮链接

    我是一名 Django 新手用户 尝试创建一个按钮 单击该按钮会链接到我网站中的另一个页面 我尝试了一些不同的例子 但似乎没有一个对我有用 举个例子 为什么这不起作用
  • 在表格上使用上下文样式将点边框应用于特定单元格

    我以前有过问了一个问题 https stackoverflow com questions 6326266 issue with applying dotted border to cells in table design在这个问题上 你
  • 使用 css 简单地将对象居中,无需修改

    我想使用 CSS 将对象居中 而不需要任何技巧 这可能吗 如何实现 我已经尝试过了 但是我的 p 标签消失了 centered position fixed top 50 left 50 有多种方法可以使元素居中 但这取决于您的元素是什么以
  • 悬停此元素时隐藏元素后的伪元素

    我的菜单垂直放置在页面左侧和菜单之间 li 我有一个 after那是一个分隔符 我想要的是当我悬停元素本身 如果它是第一个元素 时隐藏 after 元素 或者当它是中间元素时隐藏上面和底部的元素 如果它是最后一个子元素 则隐藏 after前
  • 如何在codeigniter中将上传图片比例限制为16:9?

    这是我用来上传图像的代码 this gt load gt library upload ext pathinfo file name PATHINFO EXTENSION img name now ext imgConfig upload
  • 为 Angular2 中的组件加载多个样式表

    我正在构建一个 angular2 应用程序 当我尝试为同一组件加载多个样式表时 我面临多个问题 这是我正在做的代码 import Component from angular core Component selector my tag t
  • 如何选择具有“A”类但不具有“B”类的 div?

    我有一些 div div class A Target div div class A B NotMyTarget div div class A C NotMyTarget div div class A D NotMyTarget di
  • CSS 类命名约定

    在网页上 有两个控件块 主要和次要 大多数人会使用什么类名 选择一 div class primary controls div
  • HTML5 MediaSource 适用于某些 mp4 文件,但不适用于其他文件(相同的编解码器)

    我正在玩 MediaSource API 代码直接取自 Mozilla 的示例页面 https developer mozilla org en US docs Web API MediaSource endOfStream https d
  • Jquery 数据表列总和

    我只是参考一下这个链接 https datatables net examples advanced init footer callback html了解如何获取 jquery 数据表中的列总计 但我已经完成了一半的项目 我在html页面
  • 使用 CSS 使一行 div 高度相同

    我有一排必须具有相同高度的 div 但我无法提前知道该高度可能是多少 内容来自外部源 我最初尝试将 div 放置在封闭的 div 中并将它们向左浮动 然后我将它们的高度设置为 100 但这没有明显的效果 通过将封闭 div 的高度设置为固定
  • 网站的主体和元素固定在 980px 宽度上,不会缩小

    我试图在 Rails 应用程序顶部启动前端 仅 HTML CSS 页面 但在使用 320px 视口时遇到问题 有些元素不会按比例缩小 我不明白为什么 我已经完成了检查元素 为各种元素提供了max width 100 and or width
  • 刷新页面时保存用户的选择

    我目前有一个页面显示不同团队的数据 我有一些数据 用户可以单击使其处于 打开 或 关闭 状态 并为每个数据显示不同的图标 它基本上就像一个清单 只是没有物理复选框 我想记住哪些 复选框 已被选中 即使在用户刷新页面或关闭浏览器并稍后返回之后
  • 图像背景不透明度不影响边框

    如何设置背景不透明度而不影响边框线不透明度 我找到的解决方案没有帮助 div class selected img src assets img image product 1 thumbnail jpg alt product 1 thu
  • 在移动设备上滚动

    这个问题更多的是一个建议研究 我确实希望它对其他人有帮助 并且它不会关闭 因为我不太确定在哪里寻求有关此事的建议 在过去的 6 个月里 我一直在进行移动开发 我有机会处理各种设备上的各种情况和错误 最麻烦的是滚动问题 当涉及到在网站的多个区
  • 如何创建适合屏幕宽度的等宽/高框? [复制]

    这个问题在这里已经有答案了 我正在尝试建立一个网站 其中有很多宽度和高度相等的框 例如 我有一个页面 其中并排有两个相同大小的框 简单的解决方案是将宽度和高度设置为 50vw 这在出现滚动条之前效果很好 我已经用谷歌搜索了几个小时 但无法理
  • 使用css bootstrap时如何仅向一列添加右边框?

    我正在尝试使用CSS引导框架 http getbootstrap com css tables在我的项目中 我正在使用带有以下类的表table table bordered table striped 我想删除除第一列之外的所有列的边框 这

随机推荐

  • 当鼠标离开父级时,为什么 IE 8 会因引导、淘汰验证和自定义绑定处理程序而崩溃?

    好吧 这是一个疯狂的错误 我和同事无法弄清楚 Internet Explorer 8 崩溃 没有控制台错误消息 当使用具有自定义绑定 数据绑定 的无线电输入更改淘汰可观察值并且您移出父 DOM 容器时 就会发生这种情况 在 IE 8 浏览器
  • Roxy Fileman 与 TinyMCE 5 使用 file_picker_callback

    我试图upgradeTinyMCE 版本 4 起to ver 5 但函数 file browser callback 已被替换为文件选择器回调具有完全不同的参数 TinyMCE v 4 file browser callback funct
  • 无法创建使用文字零的通用函数

    我正在尝试编写一个与内置函数类似的 Rust 函数Range 但我想要的东西只会返回 X 个数字 并将其作为列表返回 这就是我尝试创建此函数的原因 外部板条箱编号 use num Integer fn positions
  • 将 JSF 应用程序迁移到 Weblogic 12

    我们开发了一个基于 Seam 2 的 Java EE 5 应用程序 它在 Weblogic 11g 上运行 现在 我尝试按照与之前的 WLS 相同的步骤将相同的 WAR 文件部署到新的 Weblogic 12c 本地 Windows 7 计
  • 如何使 Excel MIN 函数忽略集合中的零?

    在 Excel 中 我有以下公式 MIN H69 H52 H35 H18 1 H18 10应该返回MIN范围 并将其除以当前单元格 1 H18 然后乘以 10 我在添加 NULLIF 语句类型时遇到困难 我希望能够有 可能 空白行 并让 M
  • 如何使用 PHP 将 JSON 解析为 html 表?

    我必须在我的网站上找到一张桌子 并且必须从以下位置获取该表的数据 我已经尝试了很多东西但没有任何作用
  • 在 C# 中实现接口与显式实现接口 [重复]

    这个问题在这里已经有答案了 我在 VS2010 中有两个用于实现接口的选项 当我有 IHelper cs 界面如下 public interface IHelper IEnumerable
  • 无法加载 python gstreamer 元素

    我正在跟随指南https mathieuduponchelle github io 2018 02 01 Python Elements html gi language undefined https mathieuduponchelle
  • Xcode:内存使用情况比较

    在 xcode 中模拟 iOS 时 丢失 3 4 的内存给 其他进程 正常吗 是的 这是正常的 其他进程 实际上包括 Mac 上当前运行的所有其他程序 这个数字与模拟器无关 它不测量模拟器中运行的进程 如果您运行 iOS Simulator
  • 使用地理编码将多个 addListener 事件添加到 Google 地图表单

    我创建了一个 Google 地图表单 允许用户在文本字段中输入地址并对条目进行地理编码 然后这会在地图上放置一个标记 这工作正常 但我想添加一个额外的 addListener 这样当用户单击地图时 它将在他们单击的位置添加另一个图钉 由于某
  • 完整更新 pip 包时出错

    当 pip 使用命令更新所有包时 pip freeze local grep v e cut d f 1 xargs pip install U 点打印错误vboxapi Downloading unpacking vboxapi Coul
  • NativeScript radlist 视图按需加载的工作原理

    这可能不是问题 但这是从头开始学习本机脚本时出现的一系列疑问 我有一个 1000 或更多的数据列表存储在数据表中 知道我想将其显示在列表视图上 但我不想立即读取所有数据 因为我有图像存储在其他目录中并且也想读取它 因此 对于 20 到 30
  • 获取过滤值的对象键

    情况很简单 我有一个以下对象 Object 1 false 2 true 3 false 4 false 5 false 6 false 7 false 8 true 12 false 13 false 14 false 15 false
  • .NET 日期时间.Parse

    当尝试使用解析方法时DateTime类中 我抛出异常 字符串未被识别为有效的日期时间 该字符串读作 26 10 2009 8 47 39 AM 输出时 该字符串是从正则表达式的匹配组中获取的 从该匹配组获得的任何字符串都不会解析为日期时间
  • 如何在 ASP.NET 中将对象保存到会话并在视图中访问它

    我正在编写 Asp Net MVC 4 应用程序 我想将模型对象保存到会话中 然后从另一个页面访问它 但不知道该怎么做 是否可以 例如一些代码 HttpPost public ActionResult Index EventDetails
  • 通过网络登录从 Windows 服务创建 GUI

    我读了很多关于从 Windows 服务执行 GUI 应用程序的文章 当服务以系统用户身份运行时 我使用的是 Windows XP 允许服务与桌面交互 复选框对我有用 现在我需要该服务作为域中定义的用户 来自网络 运行 一切工作正常 即使没有
  • 在 Safari/WebView 中禁用 XSS 过滤器

    我正在开发一个用于 XSS 检查的工具 使用 Webkit WebView 和 Macruby 这非常有效 只是 Safari 的 XSS 过滤器偶尔会捕获我的 URL 并拒绝执行恶意脚本 有没有办法禁用此功能 最好以编程方式禁用 经过一番
  • 在 Web API 应用程序中,我可以在什么时候拦截 URI 参数并相应地路由调用?

    注 这个问题确实有点类似于this one https stackoverflow com questions 21388655 can i programmatically determine the database context t
  • 如何通过网络访问Raspberry PI QEMU VM

    我已通过 QEMU 在 Mac OS X 上成功设置了 Raspberry PI VM 现在我想从我的 Mac 访问该虚拟机的文件系统 When I call ifconfig on my VM I get this And here th
  • 如何确保子元素不会遮盖插入阴影?

    我有一个div带有一些子元素的元素 我试图应用一个插入框阴影 子元素似乎覆盖了框阴影 这是一个 jfiddle 示例 jsFiddle 演示 http jsfiddle net sightofnick wdYpv 如果你拿走backgrou