Apifox Markdown English
  1. Components
Apifox Markdown English
  • Welcome to Apifox Markdown
  • Basic Syntax and Features
    • Title and Text
    • Lists & Tables
    • Image
    • Video
    • Code
    • Icon
    • Tailwind CSS Supports
  • Components
    • Admonition
    • Hightlight
    • Accordion
    • AccordionGroup
    • Multiple Columns
    • Card
    • Card Group
    • Image Frame
    • Image Background
    • Step
    • Tab
    • Tip
    • Copy to Clipboard
    • Text Hover Tip
    • Container
    • Text Drawing - Mermaid
      • Graph
      • Sequence Diagram
      • Class Digram
      • State Diagram
      • Entity Relationship Diagram
      • Journey Map
      • Gantt Chart
      • Pie Chart
    • Formula
      • Inline Formula
      • Block-level Formula
  • Other Questions
    • Shortcuts
  1. Components

Image Background

Use the <Background> component to set an image as a background.

Example#

image
Code:
<Background>
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450190/image-preview)
</Background>

Setting the Image Background Color#

Background color: preset1
image
Background color: preset2
image
... (similarly for preset3 to preset20) ...
Code:
// Background color: preset1
<Background bgColor="preset1">
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450190/image-preview)
</Background>

// Background color: preset2
<Background bgColor="preset2">
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450190/image-preview)
</Background>

... (similarly for preset3 to preset20) ...

Setting Image Position#

image
Code:
<Background position="bottom">
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450191/image-preview)
</Background>

Setting Content Corner Radius#

image
Code:
<Background radius={14}>
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450190/image-preview)
</Background>

Setting Image Border#

image
Code:
<Background borderWidth={1}>
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450191/image-preview)
</Background>

Setting Image Top/Bottom/Left/Right Margins#

image
Code:
<Background paddingTop={40} paddingBottom={40} paddingLeft={20} paddingRight={20}>
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450190/image-preview)
</Background>

Setting Image Background Gradient Direction#

image
Code:
<Background bgDirection={90}>
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450190/image-preview)
</Background>

Setting the Image Background Pattern#

Background pattern: ploka
image
Background pattern: ploka2
image
... (similarly for paper, paper2, paper3, wave, electronics, stars, none) ...
Code:
// Background pattern: ploka
<Background bgGridOverlay="ploka">
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450190/image-preview)
</Background>

// Background pattern: ploka2
<Background bgGridOverlay="ploka2">
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450190/image-preview)
</Background>

... (similarly for paper, paper2, paper3, wave, electronics, stars, none) ...

Setting Image Background Pattern Color#

Background pattern color: white
image
Background pattern color: gray
image
Background pattern color: black
image
Code:
// Background pattern color: white
<Background bgGridOverlay="ploka" bgGridOverlayColor="white">
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450190/image-preview)
</Background>

// Background pattern color: gray
<Background bgGridOverlay="ploka" bgGridOverlayColor="gray">
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450190/image-preview)
</Background>

// Background pattern color: black
<Background bgGridOverlay="ploka" bgGridOverlayColor="black">
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450190/image-preview)
</Background>

Setting Image Background Corner Radius#

image
Code:
<Background bgRadius={20}>
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450190/image-preview)
</Background>

Parameter Description#

ImageBackground

Modified at 2024-06-28 03:42:24
Previous
Image Frame
Next
Step
Built with