HTML電子メール：テキストの透明なレイヤーを画像の下部に表示

Question

画像の下部に透明なテキストレイヤーが必要です。

<table> 
 
    <tr> 
 
    <td style="vertical-align:top; background:#ffffff;width:20%;display:inline-block;margin-left:20px;padding:0;text-align:center; background: #FFFFFF;"> 
 

 
     <img style=" padding-top:10px; outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455301580.jpeg" border="0" height="110" width="110" > 
 
     <!-- 
 
     <p style=" width: 100%; text-align:center; font-size:10px;word-break: break-all; text-transform: uppercase; max-width: 110px; padding: 0px 5px; margin: 0 auto; background: #EE163A;">Mr. Mahesh Murthy</p>  
 
     <p style=" width: 100%; text-align:center; font-size:8px;word-break: break-all; text-transform: uppercase; max-width: 110px; padding:0px 5px; padding-right: 5px; margin: 0 auto; background: #EE163A;"> 
 
     Co-founder at seefund 
 
     </p>--> 
 
    </td> 
 
    </table>

私はpositionプロパティを使用せずに行う方法を知りません。

PS：私はHTML Emailerを作っていますので、tableタグとをcssの中で使用する必要があります。 div、positionプロパティは使用できません。

ありがとうございます。

Answer 1

<table> 
    <tbody> 
    <tr> 
     <td style="vertical-align:top; background:#ffffff;width:20%;display:inline-block;margin-left:20px;padding:0;text-align:center; background: #FFFFFF;"> 
     <div style="width: 110px; height: 110px;"> 
      <img style=" padding-top:10px; outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455301580.jpeg" border="0" height="110" width="110"> 
      <p style="width: 100%;text-align:center;font-size:10px;word-break: break-all;/* text-transform: uppercase; */max-width: 110px;padding: 0px 5px;margin: 0 auto;background: rgba(45, 41, 42, 0.5);color: white;position: relative;bottom: 25px;">Mr. Mahesh Murthy</p> 
      <p style="width: 100%;text-align:center;font-size:8px;word-break: break-all;/* text-transform: uppercase; */max-width: 110px;padding:0px 5px;padding-right: 5px;margin: 0 auto;position: relative;bottom: 25px;background: rgba(45, 41, 42, 0.5);color: white;"> Co-founder at seefund </p> 
     </div></td> 
    </tr> 
    </tbody> 
</table> 

Answer 2

何かそんなことですが、実際にはpositionを使用することはできませんか？それを上に移動することはできないからです。 z-indexプロパティを追加する必要があります（positionも必須）。

<table> 
 
    <tr> 
 
    <td style="vertical-align:top;width:20%;display:inline-block;margin-left:20px;padding:0;text-align:center; background: #FFFFFF;"><img style=" padding-top:10px; outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455301580.jpeg" border="0" height="110" width="110" > 
 
     <p style=" width:100px; text-align:center; font-size:10px;word-break: break-all; text-transform: uppercase; max-width: 110px; padding: 0px 5px; margin: 0 auto; background: #EE163A; background:rgba(255,200,255,0.5); position:relative; top:-25px;">Mr. Mahesh Murthy</p> 
 
     
 
     <!-- <p style=" width: 100%; text-align:center; font-size:8px;word-break: break-all; text-transform: uppercase; max-width: 110px; padding:0px 5px; padding-right: 5px; margin: 0 auto; background:rgba(150,150,150,0.5); position:relative; top:-10px;"> Co-founder at seefund </p>--></td> 
 
</table>