Wie können wir mithilfe von Divs und CSS Textumbrüche um unregelmäßige Bilder erreichen?

Textumbruch um unregelmäßige Bilder

In der heutigen Webdesign-Landschaft stößt man immer häufiger auf nicht rechteckige Bilder, wie etwa Länderkarten oder komplizierte Vektorgrafiken. Die visuelle Wirkung dieser Bilder kann durch das Umschließen von Text verstärkt werden. Dies stellt jedoch eine einzigartige Herausforderung dar: Wie kann der Text natürlich fließen und gleichzeitig einen gleichmäßigen Abstand zum unregelmäßigen Rand des Bildes einhalten?

Floating Dives to Definieren Sie den Umbruchbereich

Eine kreative Lösung für dieses Problem wurde von Tory Lawson in seinem Blogbeitrag „Wrapping Text Around“ aus dem Jahr 2011 vorgeschlagen nicht rechteckige Formen. Lawsons Methode besteht darin, eine Reihe von Divs zu erstellen, die neben der Form schweben und den Bereich blockieren, um den der Text herumfließt.

Messen und Teilen der Form

Zu Um den Umbruchbereich zu definieren, wird eine Bildbearbeitungssoftware wie Fireworks verwendet, um ein Raster über das Bild zu legen und eine Begrenzungslinie um die gewünschte Textgrenze zu zeichnen. Die Breite dieser Linie wird dann gemessen und in gleiche Intervalle unterteilt (z. B. alle 10 Pixel).

Erstellen der Divs

Sobald die Maße ermittelt sind, wird ein HTML erstellt list wird verwendet, um eine Reihe von Divs zu erstellen. Jedes Div stellt ein vertikales Intervall im Umbruchbereich dar und wird nach rechts verschoben, wodurch ein „Blocker“-Effekt entsteht, der verhindert, dass Text über die Form fließt.

CSS-Styling

Der letzte Schritt besteht darin, CSS-Stile auf die Divs und den Text anzuwenden. Dem Wrapper-Div wird eine Breite und Höhe zugewiesen, die das gesamte Bild umfasst, und die Eigenschaft „Hintergrundbild“ wird auf das Bild der Form festgelegt. Den Abstandsstücken wird eine Höhe zugewiesen, die den Intervallmaßen entspricht, und sie werden nach rechts verschoben, um den Blockierungseffekt zu erzeugen. Abschließend wird der Text mit einer Inline-Anzeige und einer Farbe gestaltet, um ihn auf dem Bild sichtbar zu machen.

Beispielcode

<div>

#wrapper {
  width: 634px;
  height: 428px;
  display: block;
  background-image: url("headshot.jpg");
}
.spacer {
  display: block;
  float: right;
  clear: right;
}
p {
  display: inline;
  color: #FFF;
}

Fazit

Auch wenn es möglicherweise keine einfache CSS-Lösung für das Umbrechen von Text um unregelmäßige Formen gibt, bietet Lawsons Methode eine praktikabler Ansatz. Durch sorgfältiges Ausmessen der Form und Erstellen von Divs zum Blockieren des Umbruchbereichs ist es möglich, ein optisch ansprechendes Ergebnis zu erzielen, bei dem der Text natürlich fließt und einen gleichmäßigen Abstand zum Rand der Form einhält.

Das obige ist der detaillierte Inhalt vonWie können wir mithilfe von Divs und CSS Textumbrüche um unregelmäßige Bilder erreichen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!