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

Question

我正在尝试使用角度材料重现以下内容（也就是说，在图像上添加动态文本）： 文字覆盖图像

我想用md卡，因为方便。

我的问题是我无法设法使文本覆盖在图像上；文本始终位于图像之前或之后。

使用 CSS 中的位置是唯一的解决方案吗？

非常感谢！

Answer 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

Answer 2

试试这个：

CSS：

.my-text-center {
  text-align: center;
  vertical-align: middle;
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}

html:

<div style="background-image: url('./assets/images/calendar.png');
     width: 50px;height: 50px; background-size: cover;">
    <div class="my-text-center">
       my-text
    </div>
</div>