overlay 相关问题

如何访问 Angular cdk 覆盖的内容？

<input autocomplete="off" autocapitalize="off" type="text" class="input"> <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]="origin" [cdkConnectedOverlayOpen]="isOpen" [cdkConnectedOverlayOffsetY]="12" cdkConnectedOverlayHasBackdrop cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop" (backdropClick)="close()" (detach)="close()" > <div class="suggestions-container" @dropDown (@dropDown.done)="onPanelAnimationDone($event)"> <app-option #options *ngFor="let item of items " [item]="item"></app-option> </div> </ng-template> @ViewChildren('options') public options!: QueryList<OptionComponent<T>>; @Input() items: any; @HostListener('click') open() { setTimeout(() => { this.options.changes.pipe( startWith<QueryList<OptionComponent<T>>>(this.options), tap(() => this.highlightSelectedOptions()), switchMap(options => merge(...options.map((o: OptionComponent<T>) => o.selected))), takeUntil(this.unsubscribe$) ).subscribe(selectedOption => { this.handleSelection(selectedOption) }); }) this.isOpen = true; } 我是全新使用 Angular cdk 覆盖模块的。我想创建动态可搜索选择组件，并且需要访问主机组件中覆盖的内容。我达到的唯一解决方案是内部 open 方法，但我认为可能有更好的解决方案。我将感谢您在这方面的帮助。 我需要访问 QueryList 等选项，但 QueryList 的内容是 ngAfterViewInit 内的 []，并且只有当打开覆盖层时，它才会返回 querlylist 的内容。 你可以让你的代码变得非常简单，甚至不用担心 html 内容，只需在数组本身上添加一个名为 selected 的属性，这样你就可以永远知道什么被选中和未选中，而不需要依赖 html，因为内容使用 ngIf 创建和销毁，如果您不想修改原始数组，请创建一个存储所选值的新数组

使用单击事件监听器添加和删除类

我正在使用 CSS 制作叠加层，但需要一个 onclick 事件来更改类的内容。 我在登录表单下制作了一个注册表单。点击注册后，注册表格类

适应视口大小时无法正确叠加图像

我一直在尝试让我的网站适应任何屏幕的大小，但在让我的对象正确缩放到屏幕大小同时又相互重叠时遇到了一些麻烦。 我已经...

如何在 Android 中创建“始终位于顶部覆盖”

我启动了一个 Android 项目，我需要创建一个始终位于所有应用程序之上的小图像按钮。 我见过其他一些应用程序这样做，我希望它能像那些那样。它应该...

Docker安装问题：无法挂载overlay：没有这样的设备storage-driver=overlay2

我正在尝试在 Ubuntu 20.04.3 LTS 上安装 docker。我从 *.deb 包安装。安装docker的时候，出现如下错误。 无法安装覆盖：没有此类设备存储驱动...

如何使 Laravel 视频水印叠加功能正常运行？

我已经安装了FFMpeg，所有的工作和转换都如我所愿，但是当我尝试使用ProtoneMedia \ LaravelFFMpeg \ Filters \ WatermarkFactory的水印过滤器时； 它渲染没有问题...

如何将流体图像与相同大小的div元素叠加？

我有一张图片，我想要： 覆盖容器的最大空间，同时完全可见并保持纵横比 与相同大小的 div 元素覆盖 这是 HTML，非常基础...

这个 Flutter Overlay 有什么问题

还有其他方法可以处理此覆盖，但据我所知这应该有效，有时确实有效，但在 Android 上并不总是如此。在 Windows 上它似乎工作得很好。我有最新的 Flutter (3.0...

模态叠加内的可滚动菜单列表向上跳跃

我有一个菜单组件，可以打开一个可滚动的菜单列表。当它位于模态叠加层之外时，它可以毫无问题地滚动。不过，当放置在模态叠加层中时，它会遇到麻烦

使用 vite React 和 ts 启用 hmr 覆盖

我有一个使用 vite 和 ts 设置的 React 项目。 如果没有 ts，我确实会遇到覆盖错误，就像我们过去在基本 React 项目中遇到错误一样。 从“vite”导入{defineConfig}； 导入

CSS 立方体叠加

您好，重现此内容 ：根{ --黑色: rgb(11, 14, 17); --绿色: rgb(112, 228, 80); --灰色: rgb(55, 55, 55); } *{ 保证金：0； 填充：0； 框大小：边框框； } ...

为什么当我点击覆盖层时整个页面变成白色？

我有一个侧面菜单，当它打开时会显示一个覆盖层，但我不知道为什么当我单击整个页面时整个页面变成白色而不是关闭侧面菜单，当我使用检查时我意识到......

Chrome 覆盖滚动条不遵循默认行为 - 为什么？

如果启动 Chrome，垂直滚动条在 html 表格上将不可见。这是由覆盖滚动条标志控制的。如果启用该标志，垂直滚动条将不可见...

在 Android 可组合项中删除按后退按钮时的叠加层

我在 Android 中使用 Jetpack Compose 编写的 Overlay 服务遇到问题。我试图在按下后退按钮时删除覆盖层，但我遇到了困难...

随内部文本一起增长的三角形（CSS）？

所以我的客户有兴趣为标题/链接创建悬停效果，如下面的模型所示： CSS 三角形的问题（据我所知）是它不会随着文本而增长。虽然它...

如何设置NPOI excel图表标题样式（Overlay = false）？

XSSF图表图表； 图表.SetTitle(); 我知道如何设置标题，但找不到设置标题不覆盖图表的方法

在 iOS 16 及以上版本的 MKMapView 上添加移动圆圈

我想在 MKMapView 上添加一个移动圆圈，它将保留在地图的中心，并在用户移动地图时开始移动，并在用户放大/缩小地图时放大和缩小。 .

如何在 LazyVGrid 中获取 GridItem 视图的大小或在视图角附近显示数字

我在 LazyVGrid 中有一堆按钮，如下图所示。我想在按钮的左上角附近显示一个数字。对于特定的 iOS 设备型号，我可以抵消正值...

在 python-vlc 中使用字幕的问题

这里完全是新手…… 我目前正在尝试使用 python-vlc 和 PyQt5（在 Mac 上）创建一个视频播放器，并且进展顺利...... 我的代码非常混乱和尴尬，并且充满了 awk...

使图像叠加层变暗并在 CSS 中添加文本

我如何变暗（添加半透明覆盖层）并向该图像添加文本（但水平和垂直居中），如下所示： 超文本标记语言 我如何变暗（添加半透明覆盖层）并向该图像添加文本（但水平和垂直居中），如下所示： HTML <img src="http://luxurylaunches.com/wp-content/uploads/2014/05/uber-london.jpg" id="top" data-appear-animation="fadeIn"> CSS #top { width: 100%; height: auto; } body { margin: 0px; } 在这里摆弄：http://jsfiddle.net/6jf0nxd5/ 要将文本水平和垂直居中，您需要将其包装在带有 text-align:center; 的容器中。然后您可以使用伪元素将其垂直居中。对于叠加层，您可以为文本容器指定 rgba() 可以具有透明度的背景色： 演示 body { margin: 0px; } .wrap{ position:relative; } .wrap img{ width:100%; height:auto; display:block; } .text{ position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,.5); text-align:center; } .text:after{ content:''; width:1px; height:100%; vertical-align:middle; display:inline-block; } .text span{ display:inline-block; vertical-align:middle; } <div class="wrap"> <img src="http://luxurylaunches.com/wp-content/uploads/2014/05/uber-london.jpg" id="top" data-appear-animation="fadeIn" /> <div class="text"><span>Text over the image <br/>Second line</span></div> </div> html <div id='back'><div id='mask'><div id='text'>fsfsfsssf</div></div></div> CSS body{ margin:0px; } #back{ width:100%; height:500px; background: url("http://luxurylaunches.com/wp-content/uploads/2014/05/uber-london.jpg") no-repeat; background-size:contain; } #mask{ position:relative; width:100%; height:500px; background:rgba(255,255,255,0.5); } #text{ position:absolute; top:230px; left:48%; } 小提琴：http://jsfiddle.net/6jf0nxd5/20/ 试试这个 HTML： <img src="http://luxurylaunches.com/wp-content/uploads/2014/05/uber-london.jpg" id="top" data-appear-animation="fadeIn"> <div class="sometext">some text</div> CSS： #top { width: 100%; height: auto; opacity:.3; position:absolute; z-index:0; } body { margin: 0px; } .sometext { position:absolute; z-index:1; } http://jsfiddle.net/6jf0nxd5/21/ HTML <div class='imgWrap'> <span>This is some very long text that might or might now flow on top of the image</span> <img src="http://luxurylaunches.com/wp-content/uploads/2014/05/uber-london.jpg" id="top" data-appear-animation=fadeIn"> </div> CSS： .imgWrap { display: inline-block; background: #000; position: relative; } .imgWrap > img { display: block; opacity: .5; } .imgWrap > span { position: absolute; display: table; text-align: center; z-index: 1; height: 100%; left: 0; right: 0; padding: 20px; color: #FFF; font-size: 2em; } .imgWrap > span::after { content: attr(data-title); display: table-cell; vertical-align: middle; }