1. コンポーネント
Apidog Markdown構文
  • Apidog Markdown 概要
  • 基本的記法と機能
    • タイトルとテキスト
    • リストとテーブル
    • 画像
    • ビデオ
    • コード
    • アイコン
    • Tailwind CSSサポート
  • コンポーネント
    • お知らせ
    • ハイライトブロック
    • 折りたたみブロック
    • 折りたたみグループ
    • 複数列
    • カード
    • カードグループ
    • 画像の枠線
    • 画像の背景
    • ステップ
    • タブ
    • ヒント
    • クリックして文字をコピー
    • テキストのツールチップ
    • コンテナ
    • チャートの利用 - Mermaid
      • フローチャート
      • タイミングチャート
      • クラス図
      • 状態図
      • 関係図
      • ジャーナル図
      • ガントチャート
      • 円グラフ
    • 数式
      • インライン式
      • ブロックレベルの式
  • その他の問題
    • ショートカットキー
  • スキーマ
    • Markdownデータ構造
      • Icon
      • Column
      • ImageBackground
      • Tabs
      • Container
      • Tab
      • CopyToClipboard
      • Tooltip
      • Step
      • CardGroup
      • Card
      • Accordion
      • Video
      • Frame
      • Img
  1. コンポーネント

画像の背景

<Background> コンポーネントを使用して、画像を背景として設定します。

使用例#

image
コード：
<Background>
  ![image](https://api.apidog.com/api/v1/projects/550428/resources/342519/image-preview)
</Background>

画像の背景色を設定する#

背景色: preset1
image
背景色: preset2
image
... (preset3 から preset20 まで同様に続きます) ...
コード：
// 背景色: preset1
<Background bgColor="preset1">
  ![image](https://api.apidog.com/api/v1/projects/550428/resources/342519/image-preview)
</Background>

// 背景色: preset2
<Background bgColor="preset2">
  ![image](https://api.apidog.com/api/v1/projects/550428/resources/342519/image-preview)
</Background>

... (preset3 から preset20 まで同様に続きます) ...

画像の位置を設定する#

image
コード：
<Background position="bottom">
  ![image](https://api.apidog.com/api/v1/projects/550428/resources/342520/image-preview)
</Background>

コンテンツの角丸を設定する#

image
コード：
<Background radius={14}>
  ![image](https://api.apidog.com/api/v1/projects/550428/resources/342519/image-preview)
</Background>

画像の枠線を設定する#

image
コード：
<Background borderWidth={1}>
  ![image](https://api.apidog.com/api/v1/projects/550428/resources/342520/image-preview)
</Background>

画像の上/下/左/右マージンを設定する#

image
コード：
<Background paddingTop={40} paddingBottom={40} paddingLeft={20} paddingRight={20}>
  ![image](https://api.apidog.com/api/v1/projects/550428/resources/342519/image-preview)
</Background>

画像の背景グラデーションの方向を設定する#

image
コード：
<Background bgDirection={90}>
  ![image](https://api.apidog.com/api/v1/projects/550428/resources/342519/image-preview)
</Background>

画像の背景パターンを設定する#

背景パターン: ploka
image
背景パターン: ploka2
image
... (paper、paper2、paper3、wave、electronics、stars、noneも同様に続きます) ...
コード：
// 背景パターン: ploka
<Background bgGridOverlay="ploka">
  ![image](https://api.apidog.com/api/v1/projects/550428/resources/342519/image-preview)
</Background>

// 背景パターン: ploka2
<Background bgGridOverlay="ploka2">
  ![image](https://api.apidog.com/api/v1/projects/550428/resources/342519/image-preview)
</Background>

... (paper、paper2、paper3、wave、electronics、stars、noneも同様に続きます) ...

画像の背景パターンの色を設定する#

背景パターンの色: white
image
背景パターンの色: gray
image
背景パターンの色: black
image
コード：
// 背景パターンの色: white
<Background bgGridOverlay="ploka" bgGridOverlayColor="white">
  ![image](https://api.apidog.com/api/v1/projects/550428/resources/342519/image-preview)
</Background>

// 背景パターンの色: gray
<Background bgGridOverlay="ploka" bgGridOverlayColor="gray">
  ![image](https://api.apidog.com/api/v1/projects/550428/resources/342519/image-preview)
</Background>

// 背景パターンの色: black
<Background bgGridOverlay="ploka" bgGridOverlayColor="black">
  ![image](https://api.apidog.com/api/v1/projects/550428/resources/342519/image-preview)
</Background>

画像の背景の角丸を設定する#

image
コード：
<Background bgRadius={20}>
  ![image](https://api.apidog.com/api/v1/projects/550428/resources/342519/image-preview)
</Background>

パラメータの説明#

ImageBackground

更新日時 2024-06-28 03:45:29
前へ
画像の枠線
次へ
ステップ
Built with