Wie füge ich mit HTML und CSS Text zum Bild hinzu? (Codebeispiel)

In diesem Artikel stellen wir Ihnen vor, wie Sie mit HTML und CSS Text zu Bildern hinzufügen. Der Inhalt ist sehr detailliert.

Kommen wir ohne Umschweife gleich zur Sache~

1. Der Vorteil der Verwendung von HTML und CSS zum Ausdruck

liegt nicht im „Schreiben“. Text in das Bild selbst einfügen“ „, aber „Text auf Bildern über HTML und CSS konfigurieren“ hat die folgenden Vorteile. (Empfohlenes Tutorial: CSS-Video-Tutorial)

Zeichen werden auch beim Vergrößern nicht unscharf

Es wird auch in Suchmaschinen gelesen (geeignet für SEO)

Sie können Buchstaben auswählen

Responsive Design ermöglicht es Ihnen, die Schriftgröße anzupassen (Sie können so etwas wie Kleinbuchstaben auf Ihrem Smartphone-Display machen...)

2 zum Platzieren von Text auf einem Bild

Schritt 1: Wir müssen ein Bild vorbereiten

Als Beispiel möchte ich weißen Text auf einem dunklen Hintergrund platzieren.

Schritt 2: Platzieren Sie das Bild und die Buchstaben in einem div-Element

Fügen Sie das Bild und die Buchstaben in ein div-Tag ein. Platzieren Sie im Beispiel den Text „Great Wall“ im p-Tag. Natürlich können Sie Title-Tags anstelle von P-Tags verwenden, und Sie können auch Span-Tags verwenden.

<div class = "example" >  
<img  src="/static/imghw/default1.png"  data-src="image/greatwall.jpg"  class="lazy"   alt="Wie füge ich mit HTML und CSS Text zum Bild hinzu? (Codebeispiel)" > 
<p>万里长城</p>
</div>

Schritt 3: Geben Sie das Positionsattribut an

Legen Sie das CSS-Positionsattribut für jedes Element fest.

Geben Sie position:relative für das div als übergeordnetes Element und absolute für das p-Tag an, das die Zeichenfolge enthält. Das img-Tag bewegt sich nicht.

Stellen Sie die Position des p-Tags auf top:0;

Um das Bild im Querformat zu platzieren, geben Sie die Breite des img-Tags als Breite: 100 % an.

.example{/*父元素div*/
  position: relative;/*相対定位*/
  }
.example p {
    position: absolute;/*絶対定位*/
  color: white;/*文字设为白色*/
  top: 0;  
  left: 0;
  }
.example img {  
  width: 100%;
  }

Der Effekt ist wie folgt:

Der Text erscheint in der oberen linken Ecke des Bildes. position:absolute übergeordnetes Element bestimmt die Position relativ zum übergeordneten Element. top:0; left:0 bedeutet „das Bild wird in der oberen linken Ecke des übergeordneten Elements (div) platziert“.

Schritt 4: Passen Sie den Textstil an

Passen wir jetzt den Schriftstil an, versuchen Sie, die Schriftart zu vergrößern und fett zu machen. Um einen ansprechenden Effekt zu erzielen, ändern Sie außerdem die Schriftart.

.example{
  position: relative;
  }
.example p{
    position: absolute;
    color: white;
    top: 0;  
    left: 0;
    font-family :楷体,sans-serif;
    font-weight: bold;
    font-size: 2em;   
}
.example img{width: 100%;}

Der Effekt ist wie folgt:

Das ist vollständig: Wenn Sie die Größe des Bildes auf einen bestimmten Pixel festlegen möchten, Bitte folgen Sie der Breite: In 100 % der Fälle wird die Breite des Div des übergeordneten Elements als festes Pixel angegeben.

3. Platzieren Sie den Text in der Mitte des Bildes

In einigen Fällen möchte ich den Text „in der Mitte des Bildes platzieren“. In diesem Fall sollte der CSS-Code wie unten gezeigt angezeigt werden.

.example{
  position: relative;
  }
.example p{
    position: absolute;
    color: white;
   /* top: 0;  
    left: 0;*/
    font-family :楷体,sans-serif;
    font-weight: bold;
    font-size: 2em;
    top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
    
}
.example img{width: 100%;}

Der Effekt ist wie folgt:

Erklären wir die obige Zentrierung

oben und links sind 50 %

Dies wird grundsätzlich in der Mitte platziert. Dies würde jedoch von der Größe des Textes abweichen.

Fehler beim Anpassen des Textteils

Verwenden Sie dort „Transform: Translate“, um den Textunterschied zu korrigieren. In Translate(-50%,-50%) wird der Unterschied zwischen vertikalem und horizontalem Text korrigiert. ttransform ist ein CS3-Attribut, entspricht aber neben IE8 auch anderen Browsern.

Um älteren Browsern zu entsprechen, werden Übersetzungen auch mit Herstellerpräfixen (-ms und -wabkit-) geschrieben.

Wenn Magin und Padding hinzugefügt werden und ein Leerraum vorhanden ist, liegt dieser möglicherweise außermittig. Um vorsichtig zu sein, ändern wir daher den Wert auf 0.

4. Den Kategorienamen mit Hintergrundfarbe im Bild anzeigen

Im Folgenden wird beschrieben, wie Text mit Hintergrundfarbe auf dem Bild angezeigt wird.

Bitte beachten Sie den folgenden CSS-Code, der HTML-Code ist derselbe wie oben

.example {
  position: relative;
  }
.example p {
  position: absolute;  
  top: 0;
  left: 0;
  margin: 0; 
  color: white;
  background: lightblue;
  font-size: 15px;  
  line-height: 1;
  padding: 5px 10px;
  }
.example img {
  width: 100%;
  }

Der Effekt ist wie folgt:

Wenn die Die Beschriftung wird an der Ecke des Bildes angebracht, die Zeichen sind festgelegt. In diesem Fall können Sie unabhängig von der Helligkeit des Bildes klar sehen. Wenn Sie die Größe des Bildes ändern möchten, empfehlen wir ebenfalls, die Breite für das Div des übergeordneten Elements anzugeben.

Das obige ist der detaillierte Inhalt vonWie füge ich mit HTML und CSS Text zum Bild hinzu? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!