CSSの画像内にテキストを配置する方法

画像の左端にテキストを追加するにはどうすればよいですか？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：それは今どのように動作するか

<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が見ることができるように、私はそれが正確に適切な場所にしたいと私はしたいです背景には、右

出典

2017-01-09 Tom Cohen

彼らはHTML5に組み込まれ、およびCSSを経由して同様にアクセスしている

を使用することをお勧めかもしれません。 – rrd

"LG_fRONT_fRAME_2016"を右側に揃えたいですか？ピケの下に？ – user7357089

あなたの質問は明確ではありません！ – user7357089

あなたにすべてのPICに沿ったものになりますあなたのテキストとイメージをラップすると、テキストを下にスティックすることができます。

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>

出典

2017-01-09 08:46:41 jaws

CSSの画像内にテキストを配置する方法

答えて

関連する問題