个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
在我的 Angular 5 应用程序中，我嵌套了带有多个子路径/组件的路由器 socket 。在我的一些子路由中，我必须调用一个 API，在等待答案的同时，我想显示一个覆盖整个应用程序的背景(掩码)，并为用户显示一些警告/状态，为此我正在使用具有以下类的固定定位 div:
.mask {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 500;
background-color: rgba(0,0,0,0.7)
}
问题是这个路由器 socket 与另一个创建导航栏和左侧菜单的组件共存:
<app-internal-navbar></app-internal-navbar>
<div class="app-container">
<router-outlet></router-outlet>
</div>
当我在我的路由器导出路径或子路径之一中创建掩码元素时，该元素不会隐藏整个应用程序，仅覆盖路由器导出容器。它似乎是相对于 router-outlet 元素而不是整个窗口的绝对定位。
我该怎么做才能让这些嵌套的掩码元素覆盖整个应用程序而不将它们移动到其他组件？
谢谢!
最佳答案
这可以通过简单的 CSS 实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.main{
height: 300px;
background-color: blue;
position: relative;
color: blanchedalmond;
}
.pop-up{
position: absolute;
z-index: 10;
background-color: rgba(0,0,0, 0.9);
top: 0;
left: 0;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div class="main">
<h1>Sample</h1>
asdfasdfasd
asdfasdfasdf
asdf
asdf
asdf
asdf
<div id="popup" class="pop-up">
<button onclick="document.getElementById('popup').style.display='none'">CLOSE</button>
</div>
</div>
</body>
</html>关于html - 嵌套组件中的 Angular 5 固定定位 div 作为背景 mask ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49615362/
25
4
0
我有两个包含两个接近矩形的形状的蒙版。 面罩示例(黄色): 现在，我要确定其中一个遮罩比另一个遮罩更接近实际矩形。 有可能实现吗？ 最佳答案 获取轮廓和(旋转的)矩形边界框之间的面积差。面积差异最小的
我最近从 numpy 1.11 升级到 numpy 1.13 希望摆脱这个屏蔽数组警告，但它仍然存在: MaskedArrayFutureWarning:在具有共享掩码的掩码数组上设置项目不会复制掩码
我需要在sencha中的选项卡面板中添加一个加载掩码，我在 Controller 中通过Ajax请求加载了一个商店，但是在商店加载之前我需要放置一个加载掩码，并且在商店加载之后已加载，我需要将其删除。
我希望能够设置或清除 uintX_t 的(多个)位。 i 是一个运行时变量 (uintX_t)。b 是一个运行时变量 (uintX_t)，它被限制为 0 或 1。 mask 是编译时常量。 有没有比以
我有一个处理程序，更像是一个提交按钮。我想掩盖整个页面或该表单以显示等待消息，直到完成其余过程。我做到了，它在FF中有效，但在IE中没有成功，当我执行Ext.getCmp('').body.mask(
我有我使用 Snap SVG 的 JS 代码。在某些时候我使用 element.attr({mask:maskelement}); 在该片段中，element和 maskelement是我的 svg
我需要从图标(.ICO) 文件中获取XOR Mask 和AND Mask。 如果有人可以建议我如何从 Java 执行此操作，那就太棒了。如果没有，您是否知道有任何应用程序可以获取这两个掩码并允许您扔掉
我一直在尝试学习scenekit并完成了一本书，但只有碰撞检测部分不明白，也许是最重要的部分。有类别掩码、共谋掩码和物理体？.contactTestBitMask。 我想创建一个简单的游戏来实现这个目
我在 Canvas 上制作了一个矩形 mask ，我需要 mask 外的任何东西都具有 0.8 的不透明度，因此 mask 外的所有对象都被视为不透明请看一下 fiddle 。 http://jsfi
我有一个包含可滚动内容的 div。我想为其添加一个覆盖内容的颜色 mask ，但不会随内容滚动。 http://jsfiddle.net/6e9t1wt3/1/ *{box-sizing:bord
在我的代码中，我必须选择这两个表达式之一(其中 mask 和 i 是非常数整数 -1 > i & 1) 和 (mask & 1 << i) 哪个更快？，我们在Stack Overflow上找到一个类似
我有一个包含 Image 的 Imageview 。还有一个包含兔子形状的面具形状。我有一个代码可以给出以下结果。 - (UIImage*)mynewmaskImage:(UIImage *)imag
您可能熟悉 enum 位掩码方案，例如: enum Flags { FLAG1 = 0x1, FLAG2 = 0x2, FLAG3 = 0x4, FLAG4 = 0x8
在本文之后，我将尝试实现他们如何计算每个实体的对数概率的平均值(第3.3节)。更具体地说，每个实体的得分计算为其令牌上的日志概率的平均值。。我有一个实体列表和一些提示：。任务是为每个提示找到应该适合的
我正在尝试遮盖比 mask 小的背景图像。背景和蒙版之间的空间显示为黑色。 这是我正在使用的代码: batch.end(); batch.begin(); Gdx
因此，我一直在尝试将背景图像裁剪成圆形 六边形，我发现 webkit 令人惊叹的 mask 图像非常容易地解决了我所有的问题。遗憾的是，它仅适用于 Chrome 和 Safari(当然)。 我如何为非
我有两个Java项目数据服务应用程序和数据报告应用程序，数据服务应用程序生成用于某些处理和数据报告应用程序的某些数据应该使用数据服务应用程序来使用它生成的数据来生成一些报告，这两个应用程序都应该构建为
我有一个带有绿色背景的简单 Activity ，我正在尝试提供一个带有透明圆形区域的红色叠加层。这是我要实现的效果: Expected Image 根据我在网上找到的代码，我看到的是这样的: Resu
我关注了这个link创建一个名为 mask 的自定义操作。tensorflow op的主体是 def tf_mask(x, labels, epoch_, name=None): # add "la
正如标题所说，我有 self.view，我将其添加到它的 mask 中(link) 属性另一个 View ，但是当我使用 addSubview 添加更多 View 到 self.view 时，掩码被删
我是一名优秀的程序员,十分优秀！