如何在CSS中的圖像內放置文本

Question

如何在圖像的左邊框中添加文本？

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>

現在它是這樣工作的（如您所見，它太多了，我希望它恰好在正確的位置，並且我希望背景將沿着右邊的所有圖片顯示）

Answer 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>

如何在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