Kann Text um unregelmäßig geformte Bilder herumlaufen?

Kann Text um nicht rechteckige Bilder gewickelt werden?

Das Umschließen von Text um nicht rechteckige Bilder ist eine häufige Herausforderung im Webdesign. Stellen Sie sich den Fall vor, dass Sie über Karten verschiedener Länder verfügen und möchten, dass der Text die Form des Landes umschließt und dabei einen gleichmäßigen Abstand zur Grenze einhält. Ist das möglich?

Die Lösung

Ja, es ist möglich, Text um nicht rechteckige Bilder zu wickeln, indem man eine von Tory Lawson in seinem Buch 2011 beschriebene Technik verwendet Blogbeitrag: „Text um nicht rechteckige Formen wickeln.“ Bei dieser Methode werden schwebende Divs verwendet, um den Bereich der Form zu blockieren:

Schritt 1: Definieren Sie den Umbruchbereich

• Bestimmen Sie den gewünschten Abstand zwischen Text und Bildrand.
• Öffnen Sie das Bild in einem Bearbeitungsprogramm und überlagern Sie ein Raster.
• Zeichnen Sie eine Begrenzungsform, die den Ort darstellt Der Text sollte unter Berücksichtigung der Auffüllung (z. B. 5 Pixel) enden.

Schritt 2: Erstellen Sie eine Breitenmessliste

• Messen Sie die Breite des Wickeln Sie den Bereich in regelmäßigen Abständen (z. B. alle 10 Pixel) ein.
• Notieren Sie diese Messungen auf einem Stück Papier.

Schritt 3: Divs erstellen

• Erstellen Sie ein Div, das als Wrapper für das Bild und den Text dient.
• Erstellen Sie zusätzliche Divs für jede Breite Messung.

CSS

#wrapper { 
   width: [image width];
   height: [image height];
   display:block;
   background-image:url("[image path]");
}
.spacer{
   display:block;
   float:right;
   clear:right;
}
p {
   display:inline;
   color:#FFF;
}

Hinweis: Dieser Ansatz ist nicht so einfach wie die Verwendung eines CSS-Textumbruchs. Option, aber es ermöglicht eine präzise Steuerung des Textumbruchverhaltens.

Das obige ist der detaillierte Inhalt vonKann Text um unregelmäßig geformte Bilder herumlaufen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!