Question

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

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

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

1 个答案: