Der Markdown-Editor verfügt nicht über eine eingebaute Möglichkeit, Ränder zu Bildern hinzuzufügen. Der Workaround besteht darin, das HTML-Tag <img> mit der border CSS-Eigenschaft innerhalb des style Attributs zu verwenden, was der Markdown-Editor von Document360 korrekt darstellt.
Wann man Bildgrenzen verwenden sollte
- Screenshots mit weißen oder hellen Hintergründen – ein Rand erzeugt einen sichtbaren Rand zwischen Bild und Seite und verhindert, dass das Bild mit dem Hintergrund übergeht.
- UI-Screenshots oder Diagramme – ein dünner Rand verleiht dem Bild ein sauberes, abgeschlossenes Aussehen, was sich gut für technische Dokumentation eignet.
- Gruppierung oder Betonung – ein Rand trennt ein Bild visuell vom umgebenden Inhalt und signalisiert, dass es sich um ein eigenständiges Element handelt, das es wert ist, betrachtet zu werden.
Verwende die Ränder sparsam. Wenn man sie auf jedes Bild anwendet, verringert man deren Wirkung und kann Artikel überladen wirken lassen.
Diese Technik funktioniert nur im Markdown-Editor. Im WYSIWYG-Editor verwenden Sie stattdessen den Umschalter im Bildeinstellungspanel.
Verständnis der Grenzeigenschaft
Die CSS-Abkürzung border setzt in dieser Reihenfolge drei Werte:
| Wert | Was er kontrolliert | Beispiel |
|---|---|---|
| Breite | Dicke der Grenzlinie | 2px |
| Stil | Aussehen der Grenzlinie | solid, dashed, dotted |
| Farbe | Farbe des Randes – jeder CSS-Farbname oder Hex-Code | grey, #000000 |
Kurze Referenz
Ersetzen Sie YOUR_IMAGE_URL, YOUR_ALT_TEXT, und die Randwerte durch Ihre Anforderungen.
<img src="YOUR_IMAGE_URL" alt="YOUR_ALT_TEXT" style="border: 2px solid grey;">
Um den Rand anzupassen, passen Sie Breite, Stil und Farbe an:
<!-- Thicker black border -->
<img src="YOUR_IMAGE_URL" alt="YOUR_ALT_TEXT" style="border: 4px solid black;">
<!-- Dashed blue border -->
<img src="YOUR_IMAGE_URL" alt="YOUR_ALT_TEXT" style="border: 2px dashed blue;">
Grau ist eine der am häufigsten verwendeten Randfarben neben Schwarz, da es sowohl auf hellen als auch auf dunklen Hintergründen gut funktioniert. Ersetzen Sie grey durch einen gültigen CSS-Farbnamen (zum Beispiel blue, green, yellow) oder einen Hex-Code, der zu Ihrem Design passt.
Wie man in Markdown einen Rahmen zu einem Bild hinzufügt
- Öffnen Sie den gewünschten Artikel im Knowledge Base-Portal.
- Füge den untenstehenden Ausschnitt an die Stelle ein, an der das Bild erscheinen soll.
<img src="YOUR_IMAGE_URL" alt="YOUR_ALT_TEXT" style="border: 2px solid grey;">
- Ersetzen Sie
YOUR_IMAGE_URLsie durch die URL Ihres Bildes. - Ersetzen
YOUR_ALT_TEXTSie sie durch eine kurze Beschreibung des Bildes zur Zugänglichkeit. - Passe die Randbreite, den Stil und die Farbe nach Bedarf an – siehe oben die Referenztabelle der Randeigenschaften .
Ergebnis
Ohne Grenze
Mit Rand
Man kann einen Rand mit einem Schatten auf demselben Bild mit beiden CSS-Eigenschaften im style Attribut kombinieren. Sieh dir in Markdown an, wie man Schatten zu einem Bild hinzufügt , für die Schattensyntax.