Wie kann ich Text mithilfe von CSS präzise über Bildern positionieren?

Textpositionierung über Bildern mit CSS

Beim Hinzufügen von Text über einem Bild in CSS kann das Erreichen einer präzisen Ausrichtung eine Herausforderung sein. Lassen Sie uns verschiedene Möglichkeiten erkunden, um Text effektiv über Bildern zu positionieren.

In Ihrem Beispiel haben Sie position: absolute für das Textelement verwendet, was der richtige Ansatz ist. Zur Positionierung gehört jedoch auch das genaue Festlegen der Eigenschaften „oben“, „links“ und „Breite“.

In Ihrem Code:

.image {
   position: relative;
}

h2 {
   position: absolute;
   top: 200px;
   left: 0;
   width: 100%;
   margin: 0 auto;
   width: 300px;
   height: 50px;
}

Das Problem liegt in der Verwendung von „width: 100 %“ und „left: 0“ auf h2 Element. Dadurch ragt der Text über die Bildgrenzen hinaus. Stellen Sie stattdessen die Breite auf einen bestimmten px-Wert ein und stellen Sie sicher, dass dieser kleiner als die Bildbreite ist.

Eine weitere Option zum Positionieren von Text über einem Bild ist die Verwendung von Z-Index und Position: absolut. Hier ein Beispiel:

#container {
  height: 400px;
  width: 400px;
  position: relative;
}
#image {
  position: absolute;
  left: 0;
  top: 0;
}
#text {
  z-index: 100;
  position: absolute;
  color: white;
  font-size: 24px;
  font-weight: bold;
  left: 150px;
  top: 350px;
}

<div>
<p>Mit Z-Index können Sie den Text über anderen Elementen positionieren. Indem Sie die Eigenschaften „oben“ und „links“ sorgfältig festlegen, können Sie sicherstellen, dass der Text zentriert über dem Bild liegt.</p>
<p>Stellen Sie abschließend sicher, dass html2pdf diese Funktion unterstützt, wenn Sie ein Hintergrundbild verwenden. Andernfalls erhalten Sie möglicherweise nicht die gewünschte Ausgabe.</p>
</div>

Das obige ist der detaillierte Inhalt vonWie kann ich Text mithilfe von CSS präzise über Bildern positionieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!