角度材料 - 图像上的元素叠加（在md卡中）

Question

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

我想用md-cards因为方便。

我的问题是我无法设法在图像上叠加文字; 文本始终在图像之前或之后。

玩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