角材质-元素叠加在图像上(在md-card中)

Angular Material - Element overlay on images (in md-card)

本文关键字：md-card 图像 元素 叠加      更新时间：2023-09-26

我正在尝试使用有角度的材料复制以下内容(也就是说，在图像上添加动态文本):图片上的文字

我想用贺卡，因为它很方便。

我的问题是，我不能设法使文本覆盖在图像上;文本总是在图像的前面或后面。

在CSS中播放位置是唯一的解决方案吗?

非常感谢!

您可以使用包装器。像这样:

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

相关文章：