如何在css中的图像内定位文本 [英] How to position text inside an image in css
本文介绍了如何在css中的图像内定位文本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何在图片的左侧边框中添加文字？
How do I add text in the left border of the image?
css：
.container {
position: relative;
width: 100%;
}
.summary-screen .thumbnail {
height: 100%;
width: 100%;
margin: auto;
border: 1px solid #cbcbcb;
display: block;
margin-top: 109px;
position: relative;
}
.summary-screen .primary-text {
background:lightblue;
height: 5%;
opacity: 0.5;
position: absolute;
top: 85%;
/* width: 80%; */
text-align: left;
font-size: 20px;
color: black;
}
html：
<div class="summary-screen">
<div class="container">
<div layout="row" layout-align="center">
<md-content>
<img ng-show="$ctrl.package.image" flex="85" class="thumbnail" ng-src="{{ $ctrl.package.image }}" />
</md-content>
</div>
<div layout="row" layout-align="left">
<h4 class="primary-text" flex style="text-align: left;">{{ $ctrl.package.name }}</h4>
</div>
</div>
</div>
这是它现在的工作原理（它太多左边u可以看到，正确的地方，我想要的背景将沿着所有的图片向右
this is how it works now ( its too much left as u can see, i want it exactly at the right place and i want that the background will be along all the pic to the right
推荐答案
当您封装文本和图像时，您可以将文本粘贴到底部。
When you wrap your text and image you're able to "stick" the text to the bottom.
HTML / CSS
HTML/CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.container_relative {
position: relative;
width: 100%;
max-width: 500px;
}
.container_relative .text {
position: absolute;
bottom: 0;
background-color: rgba(0,0,255,0.5);
width: 100%;
}
.container_relative img {
width: 100%;
display: block;
}
</style>
</head>
<body>
<div class="container_relative">
<img src="https://dummyimage.com/500x400/c9c9c9/00000">
<div class="text">
<p>Lorem Ipsum</p>
</div>
</div>
</body>
</html>
这篇关于如何在css中的图像内定位文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
