如何在css中将文本定位在图像中答案

【问题标题】：How to position text inside an image in css如何在css中将文本定位在图像中
【发布时间】：2017-01-09 16:46:41
【问题描述】：

如何在图片的左边框中添加文字？

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>

这就是它现在的工作方式（你可以看到它的左边太多了，我希望它正好在正确的位置，我希望背景将沿着右边的所有图片

【问题讨论】：

可能会建议使用
它们内置在 html5 中，同样可以通过 css 访问。
您要在右侧对齐“LG_fRONT_fRAME_2016”吗？图片下方？
你的问题不清楚！
link
这就是我希望它工作的方式（它工作但仅适用于我的屏幕尺寸，所以我将代码更改为我在上面添加的内容）

标签： javascript html css angularjs angular-material

【解决方案1】：

当您将文本和图像换行时，您可以将文本“粘贴”到底部。

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>

【讨论】：