CSS設定div背景画像実装コード

コンポーネントに背景画像コントロールを追加するには、次の 2 つの手順だけが必要です。

<表示
            className="ギフト"
            スタイル={{
              背景: `url(${baseUrl}starMove/exclusiveEntrance/card.png) 繰り返しなし`,
              背景サイズ: '100% 100%',
            }}
          >
          <View classname="ギフトリスト"></View>
</表示>

背景と背景サイズを設定します。

スタイル={

 幅: 100%;
 高さ: 100%;
}

ps: CSSファイルを使用して背景画像のサイズをdivのサイズに合わせる方法は次のとおりです。

背景画像属性 background-size: cover; を設定すると、背景画像を div のサイズに合わせて調整できます。

background-size には 3 つのプロパティがあります。

• auto: このプロパティを使用すると、背景画像はスケーリングされずに 100% のサイズで表示されます。 div を超えるものはすべて非表示になります。画像が小さすぎる場合は、自動的にタイル化されます。このプロパティは、繰り返し背景や半透明の画像背景を作成するためによく使用されます。
• cover: この属性を使用すると、画像は div を覆うように拡大縮小され、画像の隠れた部分は最小限になります。この属性は、大きな画像の背景に広く使用されています。これは理解するのが難しく、実践が必要です。
• contain: この属性を使用すると、画像は最大に拡大され、完全に表示されますが、画像のサイズ比が div のサイズ比と異なるため、画像が div をカバーできない場合は、画像が自動的にタイル化されます。

要約する

CSSでdiv背景画像を設定する実装コードに関するこの記事はこれで終わりです。CSS div背景画像に関するより関連性の高いコンテンツについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。