De Markdown-editor heeft geen ingebouwde manier om randen aan afbeeldingen toe te voegen. De oplossing is om de HTML-tag <img> te gebruiken met de border CSS-eigenschap binnen het style attribuut, die door de Markdown-editor van Document360 correct wordt weergegeven.
Wanneer te gebruiken afbeeldingsranden
- Screenshots met witte of lichte achtergronden — een rand creëert een zichtbare rand tussen de afbeelding en de pagina, waardoor het beeld niet in de achtergrond opgaat.
- UI-screenshots of diagrammen — een dunne rand geeft de afbeelding een schone, afgesloten uitstraling, wat goed werkt voor technische documentatie.
- Groeperen of nadruk — een rand scheidt een afbeelding visueel van de omliggende inhoud en geeft aan dat het een apart element is dat het waard is om te onderzoeken.
Gebruik de randen spaarzaam. Het toepassen ervan op elke afbeelding vermindert het effect en kan artikelen rommelig laten aanvoelen.
Deze techniek werkt alleen in de Markdown-editor. Gebruik in de WYSIWYG-editor in plaats daarvan de randschakelaar in het beeldinstellingenpaneel.
Inzicht in de grenseigenschap
De border CSS-stenografie stelt drie waarden in deze volgorde:
| Waarde | Wat het controleert | Voorbeeld |
|---|---|---|
| Breedte | Dikte van de randlijn | 2px |
| Stijl | Uiterlijk van de grenslijn | solid, dashed, dotted |
| Kleur | Kleur van de rand — elke CSS-kleurnaam of hex-code | grey, #000000 |
Snelle referentie
Vervang YOUR_IMAGE_URL, YOUR_ALT_TEXT, en de randwaarden door je vereisten.
<img src="YOUR_IMAGE_URL" alt="YOUR_ALT_TEXT" style="border: 2px solid grey;">
Om de rand aan te passen, pas je de breedte, stijl en kleur aan:
<!-- 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;">
Grijs is een van de meest gebruikte randkleuren naast zwart, omdat het goed werkt tegen zowel lichte als donkere achtergronden. Vervang grey door een geldige CSS-kleurnaam (bijvoorbeeld blue, green, yellow) of een hexcode die bij je ontwerp past.
Hoe voeg je een rand toe aan een afbeelding in Markdown
- Open het gewenste artikel in het Knowledge Base-portaal.
- Plak het fragment hieronder op de plek waar je wilt dat de afbeelding verschijnt.
<img src="YOUR_IMAGE_URL" alt="YOUR_ALT_TEXT" style="border: 2px solid grey;">
- Vervang
YOUR_IMAGE_URLdoor de URL van je afbeelding. - Vervang
YOUR_ALT_TEXThet door een korte beschrijving van de afbeelding voor toegankelijkheid. - Pas de breedte, stijl en kleur van de rand aan indien nodig — zie de referentietabel van randeigenschappen hierboven.
Uitkomst
Zonder grens
Met rand
Je kunt een rand combineren met een schaduw op dezelfde afbeelding met beide CSS-eigenschappen in het style attribuut. Zie Hoe je schaduwen aan een afbeelding toevoegt in Markdown voor de schaduwsyntaxis.