Angular Material - 图像上的元素叠加（在 md 卡中）

Posted 2023-03-06

【中文标题】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 规范中。这意味着按照规范自己做是完全可以的。