[英]Angular Material - Element overlay on images (in md-card)
I am trying to reproduce the following using angular material (that is to say, add dynamic text over an image) : text over image 我试图使用角度材料(也就是说,在图像上添加动态文本)来重现以下内容: 文本在图像上
I would like to use md-cards because there are convenient. 我想用md-cards因为方便。
My problem is that I cannot manage to make the text overlay on the image; 我的问题是我无法设法在图像上叠加文字; the text is always before or after the image.
文本始终在图像之前或之后。
Is playing with the position in CSS the only solution? 玩CSS中的位置是唯一的解决方案吗?
Thanks a lot! 非常感谢!
You can use a wrapper. 您可以使用包装器。 Something like this:
像这样的东西:
HTML: 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: CSS:
.md-card-wrapper {
position: relative;
width: 40%;
span {
position: absolute;
top: 20%;
right: 20%;
color: white;
font-size: 34px;
}
}
Or you can play with my example here: http://codepen.io/anon/pen/xEpvOv 或者你可以在这里玩我的例子: http : //codepen.io/anon/pen/xEpvOv
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.