关键词：
【中文标题】Angular Material - 图像上的元素叠加（在 md 卡中）【英文标题】：Angular Material - Element overlay on images (in md-card) 【发布时间】：2017-02-14 11:00:54 【问题描述】：我正在尝试使用有角度的材料来重现以下内容（也就是说，在图像上添加动态文本）： text over image
我想用md-cards，因为那里很方便。
我的问题是我无法将文字叠加在图像上；文字总是在图片之前或之后。
在 CSS 中使用位置是唯一的解决方案吗？
非常感谢！
【问题讨论】：
您根本不需要任何 CSS？几行 CSS 就可以做到这一点。 【参考方案1】：您可以使用包装器。像这样的：
HTML：
<div class="md-card-wrapper" ng-app="myapp">
<md-card>
<img src="http://i.imgur.com/OiqxTL1.jpg">
</md-card>
<span>Text over image</span>
</div>
CSS：
.md-card-wrapper
position: relative;
width: 40%;
span
position: absolute;
top: 20%;
right: 20%;
color: white;
font-size: 34px;
或者你可以在这里玩我的例子：http://codepen.io/anon/pen/xEpvOv
【讨论】：
我认为他试图避免使用 CSS。 确实，我试图避免使用 css 并尽可能多地使用 Angular Material 原生选项/功能。例如，包装器选项有效（顺便说一句），但是当我更改浏览器窗口的大小时，文本和位置不会缩放，而 Angular Material（或多或少）本机处理这些问题。 没有用于文本覆盖的内置 Angular Material 解决方案，但它们在 Material 规范中。这意味着按照规范自己做是完全可以的。Angular 9 - 删除 Angular Material Stepper 上的默认图标（创建）
】Angular9-删除AngularMaterialStepper上的默认图标（创建）【英文标题】：Angular9-Removedefaulticon(create)onAngularMaterialStepper【发布时间】：2020-07-0715:07:31【问题描述】：我在使用Angular时遇到了这个烦人的问题：我通过添加到页面的provides... 查看详情
获取其他元素的 Angular Material 主题配色方案/调色板
】获取其他元素的AngularMaterial主题配色方案/调色板【英文标题】：GetAngularMaterialthemecolorscheme/paletteforotherelements【发布时间】：2018-03-2709:12:48【问题描述】：我正在构建一个应用程序，但我想保持一致的配色方案，可以通过设置... 查看详情
如何在 Angular Material 的对话框中放置图像？
】如何在AngularMaterial的对话框中放置图像？【英文标题】：HowdoIfitanimageinsideofadialogboxinAngularMaterial?【发布时间】：2021-07-2706:42:27【问题描述】：我正在尝试将图像完全放入对话框窗口中，而不会溢出屏幕或在每一侧都出现滚轮... 查看详情
Angular Material 指令在小型/移动显示器上隐藏元素
】AngularMaterial指令在小型/移动显示器上隐藏元素【英文标题】：AngularMaterialdirectivetohideelementonsmall/mobiledisplay【发布时间】：2016-06-0600:48:42【问题描述】：是否有使用某种指令在小型/移动显示器上隐藏元素的“角度材质方式”？... 查看详情
带有 Angular Material 动态高度标签的可滚动内容元素
】带有AngularMaterial动态高度标签的可滚动内容元素【英文标题】：ScrollablecontentelementswithAngularMaterialdynamic-heighttabs【发布时间】：2016-06-0205:14:03【问题描述】：在AngularMaterial的演变过程中，severaltimes提出了这个问题，但我无法让... 查看详情
Angular Material：“mat-dialog-content”不是已知元素
】AngularMaterial：“mat-dialog-content”不是已知元素【英文标题】：AngularMaterial:\'mat-dialog-content\'isnotaknownelement【发布时间】：2020-07-0212:14:11【问题描述】：在将此问题标记为“重复”之前，请听我说完，因为我被这个问题困扰了好... 查看详情
Angular Material - mat-select：自定义填充溢出父元素
】AngularMaterial-mat-select：自定义填充溢出父元素【英文标题】：AngularMaterial-mat-select:Custompaddingoverflowsparentelement【发布时间】：2019-07-2720:02:03【问题描述】：我正在使用AngularMaterial组件，并且正在尝试自定义组合框（选择）。当... 查看详情
在 Angular Material CDK 拖放中，如何防止项目随着元素移动而自动重新排列？
】在AngularMaterialCDK拖放中，如何防止项目随着元素移动而自动重新排列？【英文标题】：InAngularMaterialCDKDragDrop,HowtoPreventItemsfromAutomaticallyRearrangingasanElementMoves?【发布时间】：2019-10-2306:05:51【问题描述】：提前致谢。问题来了：... 查看详情
如何让 Angular Material Design 的 <md-card> 指令在 IE 中正确缩放为图像？
】如何让AngularMaterialDesign的<md-card>指令在IE中正确缩放为图像？【英文标题】：HowtogetAngularMaterialDesign\'s<md-card>directivetoscaletoimageproperlyinIE?【发布时间】：2015-01-2319:40:14【问题描述】：我已经在material.angularjs.org网站上以p... 查看详情
angular-material md-card 动态高度
】angular-materialmd-card动态高度【英文标题】：angular-materialmd-carddynamicheight【发布时间】：2016-08-0322:08:26【问题描述】：我正在努力使我的md卡网格根据其图像具有不同的高度。现在，如果一个图像更高，则整行卡片都与该高度匹... 查看详情
单击日期选择器时，单元格编辑器上的 Ag-grid Angular Material Datepicker 失去焦点
】单击日期选择器时，单元格编辑器上的Ag-gridAngularMaterialDatepicker失去焦点【英文标题】：Ag-gridAngularMaterialDatepickeronCellEditorlosefocuswhenclickingondatepicker【发布时间】：2021-09-0507:59:27【问题描述】：我正在Ag-grid上制作房间预订应用... 查看详情
Angular Elements：对材质的依赖
...ments：对材质的依赖【英文标题】：AngularElements:dependencyonMaterial【发布时间】：2018-12-1208:12:33【问题描述】：我正在创建一个AngularElement以用于其他项目。该元素是一个在其模板中包含AngularMaterial组件的组件，所以最终我的元素... 查看详情
表单控件不适用于 Angular Material Mat-select
】表单控件不适用于AngularMaterialMat-select【英文标题】：FormControlnotworkingforAngularMaterialMat-select【发布时间】：2020-03-0912:59:41【问题描述】：我有一个mat-select表单元素绑定到FormControl以进行验证。目标是如果未填写选择框（或未选... 查看详情
Angular Material Elements 不会对更改做出反应
】AngularMaterialElements不会对更改做出反应【英文标题】：AngularMaterialElementsdonotreacttochanges【发布时间】：2020-03-1212:52:40【问题描述】：无论我在Angular8项目中添加什么Angular材质元素（mat-tab、mat-button-toggle、mat-select、mat-input...），... 查看详情
CSS：将 CSS 样式应用于除 Material Angular 之外的所有内容
】CSS：将CSS样式应用于除MaterialAngular之外的所有内容【英文标题】：CSS:ApplyCSSStyletoEverythingexceptMaterialAngular【发布时间】：2020-11-2323:16:39【问题描述】：如何将CSS样式（justify-content:center或box-sizing:border-box应用于所有子元素和孙子... 查看详情
如何控制 Angular Material 中的 md-select 下拉位置
】如何控制AngularMaterial中的md-select下拉位置【英文标题】：Howtocontrolmd-selectdropdownpositioninAngularMaterial【发布时间】：2017-01-2502:22:11【问题描述】：我需要自定义一个md-select以便选项列表更像传统的选择。选项应显示在选择元素下... 查看详情
Angular2 材质“md-icon”不是已知元素
...Angular2材质“md-icon”不是已知元素【英文标题】：Angular2material\'md-icon\'isnotaknownelement【发布时间】：2017-03-1012:40:55【问题描述】：我有使用@angular2-material2.0.0-alpha.8-2版本的angular2应用程序。一切正常。现在我决定将材料版本升级... 查看详情
ng-material-multilevel-menu 在 Angular 7 中不起作用
】ng-material-multilevel-menu在Angular7中不起作用【英文标题】：ng-material-multilevel-menunotworkinginAngular7【发布时间】：2019-06-1021:06:50【问题描述】：我将thisplugin用于Angular7上的多级菜单。它在执行ngserve时工作正常，但在执行ngbuild时不起... 查看详情