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

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をよろしくお願いいたします。

<<:  Tomcat8はcronologを使用してCatalina.Outログを分割します

>>:  ツールベースのウェブサイトの考察: ツールベースのウェブサイトの定義と典型的なケース分析 (写真とテキスト)

推薦する

vsftpdで仮想ユーザーログインを設定する方法

yum で vsftpd をインストールします [root@localhost など]# yum -...

WeChatミニプログラム公式顔認証の詳しい説明

ミニプログラムはユーザーの個人情報を収集してアップロードしましたが、拒否されました。こんにちは、ミニ...

カレンダー効果を実現するための Bootstrap+JQuery

この記事では、カレンダー効果を実現するためのBootstrap+Jqueryの具体的なコードを参考ま...

Linuxはlsof/extundeleteツールを使用して、誤って削除されたファイルやディレクトリを復元します。

序文Linux には Windows のような目立つごみ箱がないため、簡単に復元することはできません...

ウェブ上でチャートを描くための 9 つの優れた JavaScript フレームワーク スクリプト

ウェブ上でチャートを描くための 9 つの優れた JavaScript フレームワーク スクリプト 1...

Nginx 逆生成 Mogilefs 分散ストレージ例の詳細な説明

1. 分散ストレージシステムの概要情報技術の継続的な発展により、利便性がもたらされる一方で、データ量...

JavaScriptの浅いコピーと深いコピーについての簡単な説明

目次1. 直接譲渡2. 浅いコピー3. ディープコピー1. JSONオブジェクトメソッド2. 再帰コ...

Vue2.x における双方向バインディングの原理と実装

目次1. 実施プロセス2. オブザーバーを表示する3. ウォッチャーを実装する4. コンパイルを実装...

10分でDockerを使ったマイクロサービスのデプロイ方法を学ぶ

Docker は 2013 年のリリース以来、広く注目され、ソフトウェア業界を変える可能性を秘めてい...

検証コード干渉を実装する js (動的)

この記事の例では、検証コードの動的干渉を実装するためのjsの具体的なコードを共有しています。具体的な...

MYSQL インストールの解凍バージョンと発生したエラーと解決策

1 インストールMYSQL 公式サイトから対応する解凍バージョンをダウンロードし、必要なディレクトリ...

Vue+SSMは画像アップロードのプレビュー効果を実現します

現在の要件は、ファイルのアップロード ボタンがあることです。ボタンをクリックすると、アップロードする...

モバイルの赤い封筒の雨機能ページを実装するための JavaScript HTML

この記事の例では、モバイル紅包雨機能ページを実現するためのHTMLの具体的なコードを共有しています。...

vue-cropper コンポーネントは画像の切り取りとアップロードを実現します

この記事では、画像の切り取りとアップロードを実装するためのvue-cropperコンポーネントの具体...

Linux の crontab タスク スケジューリングの簡単な分析

1. スケジュールタスクを作成する命令crontab -eは現在のユーザーの編集インターフェースに入...