画像の背景
<Background>
コンポーネントを使用して、画像を背景として設定します。
使用例
コード:
<Background>
![image](https://api.apidog.com/api/v1/projects/550428/resources/342519/image-preview)
</Background>
画像の背景色を設定する
背景色: preset1
背景色: preset2
... (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 まで同様に続きます) ...
画像の位置を設定する
コード:
<Background position="bottom">
![image](https://api.apidog.com/api/v1/projects/550428/resources/342520/image-preview)
</Background>
コンテンツの角丸を設定する
コード:
<Background radius={14}>
![image](https://api.apidog.com/api/v1/projects/550428/resources/342519/image-preview)
</Background>
画像の枠線を設定する
コード:
<Background borderWidth={1}>
![image](https://api.apidog.com/api/v1/projects/550428/resources/342520/image-preview)
</Background>
画像の上/下/左/右マージンを設定する
コード:
<Background paddingTop={40} paddingBottom={40} paddingLeft={20} paddingRight={20}>
![image](https://api.apidog.com/api/v1/projects/550428/resources/342519/image-preview)
</Background>
画像の背景グラデーションの方向を設定する
コード:
<Background bgDirection={90}>
![image](https://api.apidog.com/api/v1/projects/550428/resources/342519/image-preview)
</Background>
画像の背景パターンを設定する
背景パターン: ploka
背景パターン: ploka2
... (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
背景パターンの色: gray
背景パターンの色: black
コード:
// 背景パターンの色: 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>
画像の背景の角丸を設定する
コード:
<Background bgRadius={20}>
![image](https://api.apidog.com/api/v1/projects/550428/resources/342519/image-preview)
</Background>
パラメータの説明
更新時間 3 months ago