html 如何使菜单内容以外的所有内容都透明？

i1icjdpr 于 2022-12-09 发布在其他

关注(0)|答案(1)|浏览(136)

我在项目上工作，但似乎有一个问题，我还不能找到。当你点击菜单按钮，它必须显示下拉菜单的内容，其他一切必须要么透明或推到右边。看看所附的img，你可以看到那些圆圈是透明的，但是页面的页眉和其他内容是不透明的......我不能“我不知道菜单打开时如何将其他内容向右推... This is what I got
页面内容必须是透明的，或者在菜单打开时向右推...
我尝试了以下方法...
第一个
哦，还有一件事！有没有可能把所有的内容都推到右边？用菜单...我的意思是，如果我点击菜单，他们会显示菜单的内容，并把菜单以外的其他内容推到右边...类似的东西？？请帮助我理解，如果我做错了什么...我这样做的HTML，CSS和JS只...提前感谢您的时间。

Html

来源：https://stackoverflow.com/questions/74735715/how-can-i-have-everything-transparent-except-menu-content

1条答案

按热度按时间

watbbzwu1#

- 修改掩码CSS**

问题出在套用至现有遮罩元素的样式。若要修正此问题，请移除.bg css规则并插入下列规则。在nav-container上设定z-index并套用显示：固定在遮罩上会使遮罩覆盖页面的整个内容，但菜单位于顶部。请打开并运行该代码段以了解其工作原理。

#nav-container {
  z-index: 999;
}

#nav-container:focus-within .bg {
  pointer-events: all;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.5;
  transition: 0.3s;
  background: #000;
}

- 程式码片段**

第一个

赞(0）回复(0）举报 2022-12-09

我来回答

html 如何使菜单内容以外的所有内容都透明？

1条答案

相关问题

热门标签

最新问答