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ログを分割します

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

推薦する

CentOS7 64 ビットでの MySQL 5.7 のインストールと設定のチュートリアル

インストール環境: CentOS7 64ビットMINI版、MySQL5.7をインストール1. YUM...

Reactでファイルパスエイリアスを素早く設定する方法

React は、ユーザー インターフェイスを構築するための JavaScript ライブラリです。F...

Dockerを使用してRedisクラスターを構築する方法

目次1. Redis Dockerベースイメージを作成する2. Redisノードイメージを作成する3...

Linuxでディレクトリを効率的に切り替える方法

Linux でディレクトリを切り替えるとなると、誰もが間違いなくcdコマンドを思い浮かべるでしょう。...

JavaScript 正規表現の説明

目次1. 正規表現の作成2. 使用モード2.1 シンプルモードの使用2.2 特殊文字の使用3. 応用...

jQuery はラブエフェクトをクリックする

この記事では、jQueryのクリック時のラブエフェクトの具体的なコードを参考までに共有します。具体的...

MySQL Community Server 5.7.19 インストール ガイド (詳細)

MySQL公式サイトのzipファイルのダウンロードリンク https://dev.mysql.co...

Flex モバイルレイアウトにおけるシングルラインレイアウトとダブルラインレイアウトの違いと使い方

レイアウトにul>liを使用した単一行レイアウトを以下に示します。 <ul class=...

CSS ワールド - コード実践: 画像の Alt 情報の表示

ただし、デフォルトの src を持つ <img> 要素を使用してスクロール読み込み効果を...

Linux で MySQL データベースのスケジュールされたバックアップを実装する簡単な方法

詳細な手順は次のとおりです。 1. ディスク容量を確認します。 [root@localhost バッ...

ボタンのタイプが送信として指定されていません。ボタンをクリックしても、指定された URL にジャンプしません。

現在、プロジェクトの要件により、フォームの送信を制御し、送信前にデータを検証および処理するために j...

mysqldump を使用して MySQL データをバックアップする方法

1. mysqldump の紹介mysqldump は、MySQL に付属する論理バックアップ ツー...

Vue大画面表示適応方法

この記事では、vueの大画面表示適応の具体的なコードを参考までに紹介します。具体的な内容は以下のとお...

Vue プロジェクトに Electron を追加するための詳細なコード

1. package.jsonに追加する "メイン": "electr...