如何在CSS中的图像内放置文本

Question

How do I add text in the left border of the image? 如何在图像的左边框中添加文本？

css: 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: 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>

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 现在它是这样工作的（如您所见，它太多了，我希望它恰好在正确的位置，并且我希望背景将沿着右边的所有图片显示）

Answer 1

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中的图像内放置文本

问题描述

1 个解决方案

解决方案1
0 2017-01-09 08:46:41

如何在CSS中的图像内放置文本

问题描述

1 个解决方案

解决方案1 0 2017-01-09 08:46:41

解决方案1
0 2017-01-09 08:46:41