Text auf das Bild html css3

-1

Ich versuche, Text in Bild zu setzen und das Bild per E-Mail, damit ich tun, um dieseText auf das Bild html css3

#text { 
 
    z-index: 100; 
 
    position: absolute; 
 
    color: white; 
 
    font-size: 24px; 
 
    font-weight: bold; 
 
    left: 150px; 
 
    top: 350px; 
 
}

<table width="400" class="main" border="0" cellpadding="0" cellspacing="0"> 
 
    <tr> 
 
    <td> 
 
     <img src="images/bd.jpg" border="0" /> 
 
     <p id="text"> 
 
     Hello 
 
     </p> 
 
    </td> 
 
    </tr> 
 
</table>

Wenn ich E-Mails abrufen .. Bild angezeigt wird, aber Text wird angezeigt unter Bild . so nicht auf dem Bild, wie ich Text auf dem Bild

Quelle

2017-10-02 see sharp

Verschiedene E-Mail-Clients handhaben CSS & HTML unterschiedlich. Dies ist zu weit gefasst – ProEvilz

Zunächst öffnen Sie Ihre TR nicht richtig, so dass Ihre Tabelle nicht richtig funktioniert. – Granny

<table width="400" class="main" border="0" cellpadding="0" cellspacing="0"> 
      <td> 
       <img src="images/bd.jpg" border="0" /> 
       <p id="text"> 
        Hello 
       </p> 
      </td> 
     </tr> 
    </table> 


    #text { 
      z-index: 100; 
      position: absolute; 
      color: white; 
      font-size: 24px; 
      font-weight: bold; 
      left: 150px; 
      top: 0; 
     } 
    table{ 
     position:relative; 
    }

Quelle

2017-10-02 10:49:35 Jana

Versuchen Sie zu erklären, was Sie aktualisiert haben, oder versuchen Sie, diese Lösung zu erhalten, anstatt nur Code einzufügen. – bhansa

Was ist das @Jana –

Sie sollten das Elternelement als 'position: relative' haben. dann können nur die untergeordneten Elemente mit der Eigenschaft "position: absolute" über dem "parent element" sitzen. – Jana

anzuzeigen absolute positionierte Element relativ zum übergeordneten anzuzeigen, nicht Bildschirm, müssen Sie position: relative an die Eltern (zum table in Ihrem Fall) setzen. In diesem Beispiel ist das Bild unter dem Text und der Text positioniert ist, relativ zu dem Bild:

table { 
 
    position: relative; 
 
} 
 

 
#text { 
 
    z-index: 100; 
 
    position: absolute; 
 
    color: white; 
 
    font-size: 100px; 
 
    font-weight: bold; 
 
    left: 150px; 
 
    top: 350px; 
 
}

<table width="400" class="main" border="0" cellpadding="0" cellspacing="0"> 
 
    <tr> 
 
    <td> 
 
     <img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/Blue_Tiger_Im_IMG_9450.jpg" border="0" /> 
 
     <p id="text"> 
 
     Hello 
 
     </p> 
 
    </td> 
 
    </tr> 
 
</table>

Quelle

2017-10-02 10:50:20

Sie setzen müssen imgposition: relative;

img { 
 
    position: relative; 
 
} 
 

 
#text { 
 
    z-index: 100; 
 
    position: absolute; 
 
    color: black; 
 
    font-size: 24px; 
 
    font-weight: bold; 
 
    left: 150px; 
 
    top: 150px; 
 
}

<table width="400" class="main" border="0" cellpadding="0" cellspacing="0"> 
 
    <tr> 
 
    <td> 
 
     <img src="https://thumb9.shutterstock.com/display_pic_with_logo/436114/274833056/stock-vector-sample-grunge-retro-red-isolated-ribbon-stamp-sample-stamp-sample-sample-sign-274833056.jpg" border="0" /> 
 
     <p id="text"> 
 
     Hello 
 
     </p> 
 
    </td> 
 
    </tr> 
 
</table>

Quelle

2017-10-02 10:51:05 imcvampire

Ich versuchte, aber immer noch Text wird unter Bild angezeigt .. https://i.stack.imgur.com/FjAUI.png –

ich benutze src = "cid: background" .. ist dieses Problem? –

Was ist 'cid: Hintergrund? 'src' muss eine URL sein! – imcvampire

haben

Warum machst du das Bild nicht im Hintergrund? rundes Bild des Absatzes, aber Sie müssen die Größe als Ihr Bild anpassen, um es sichtbar zu machen

Quelle

2017-10-02 10:54:02

Text auf das Bild html css3

Antwort

Verwandte Themen