javascript - Angular Material - 图像上的元素叠加(在 md-card 中)

Question

我正在尝试使用 Angular Material 重现以下内容(也就是说，在图像上添加动态文本): text over image

我想用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