Skip to main content

 

 

 

 
Language:
 
従来のWebアプリにのみ適用されます
 
 
OutSystems

Card Backgroundのリファレンス

レイアウトおよびクラス

CSSセレクタ

要素 CSSクラス 説明
.card-background-content .bottom-center コンテンツの垂直位置を下に合わせ、水平位置を中央に合わせます。
.card-background-content .bottom-left コンテンツの垂直位置を下に合わせ、水平位置を左に合わせます。
.card-background-content .bottom-right コンテンツの垂直位置を下に合わせ、水平位置を右に合わせます。
.card-background-content .center コンテンツの垂直位置を中央に合わせ、水平位置を中央に合わせます。
.card-background-content .center-left コンテンツの垂直位置を中央に合わせ、水平位置を左に合わせます。
.card-background-content .center-right コンテンツの垂直位置を中央に合わせ、水平位置を右に合わせます。
.card-background-content .top-center コンテンツの垂直位置を上に合わせ、水平位置を中央に合わせます。
.card-background-content .top-left コンテンツの垂直位置を上に合わせ、水平位置を左に合わせます。
.card-background-content .top-right コンテンツの垂直位置を上に合わせ、水平位置を右に合わせます。

高度なユースケース

Counterパターンに新しいスタイルを追加する

1.Counterパターンをプレビューにドラッグします。

1.入力パラメータを以下の値に設定します。 - Color: Entities.Color.Neutral10 - Position: Entities.PositionExtended.BottomCenter - Height: 400 - ExtendedClass: shadow-xl

![](<images/cardbackground-7-ss.png>)

1.[Content]プレースホルダにテキストウィジェットを追加し、Style Classesプロパティを「heading4 text-neutral-0」に設定します。

![](<images/cardbackground-8-ss.png>)

1.画像を[BackgroundImage]プレースホルダにドラッグします。

![](<images/cardbackground-9-ss.png>)

1.パブリッシュしてテストします。

![](<images/cardbackground-10-ss.png>)

注記

object-fitプロパティはInternet Explorerではサポートされません。

  • Was this article helpful?