CSSは、Cascading StyleSheetsの頭字語です。これは、Webページを変換する機能を備えたシンプルで強力なデザイン言語です。簡単に言えば、それはウェブページをユーザーに見やすく魅力的にするプロセスを合理化します。 。この記事では、CSSでさまざまな背景画像を次の順序で実装する方法を理解します。
文字列の日付を日付に変換する
CSSプロパティの背景画像
画像の動作と配置を制御するために使用される多くのプロパティがあります。これらのプロパティは次のとおりです。
- 背景画像
- 背景-繰り返し
- 背景-添付ファイル
- 背景位置
- 背景サイズ
- 背景色
これらの各プロパティに慣れ、興味深いデモンストレーションでそれらをいつどのように使用するかを確認します。
CSSの背景画像
ザ・ 背景画像 名前が示すように、プロパティは、Webページの要素を介して背景画像を示して設定するために使用されます。デフォルトでは、背景画像は要素の左上隅に配置されます。
構文： 背景画像：url |なし|線形グラデーション|放射状グラデーション
body {background-image：url（ 'apple.jpg'）}URLを使用した背景
パラメータを理解しましょう：
- url： このパラメータへの入力により、任意の画像へのファイルパス、または背景として設定する必要のある画像へのURLのいずれかを指定できます。複数の画像を宣言するために、URLはコンマ区切り文字で区切られます。
body {background-image：url（ 'apple.jpg'）} 
- 無し： これはプロパティのデフォルト値であり、その値が指定されている場合、背景画像はレンダリングされません。
本文{背景：なし}- linear-gradient（）： 背景画像は線形グラデーションに設定されています。このプロパティには、上から下まで、少なくとも2色を指定する必要があります。
body {background-color：＃001 background-image：linear-gradient（white 15％、transparent 16％）、linear-gradient（white 15％、transparent 16％）background-size：60px 60px background-position：0 0、 30px 30px}- 放射状グラデーション（）： 背景画像は放射状のグラデーションに設定されています。このプロパティには、少なくとも2つの色、つまり中央から端までを指定する必要があります。
body {background-color：＃001 background-image：radial-gradient（white 15％、transparent 16％）、radial-gradient（white 15％、transparent 16％）background-size：60px 60px background-position：0 0、 30px 30px}- 繰り返し-線形-グラデーション（）： 線形グラデーションを繰り返します。上で見たのと同じ例を繰り返し線形グラデーションの線形グラデーションで使用して、違いを見てみましょう。
body {background-color：＃001 background-image：repeating-linear-gradient（white 15％、transparent 16％）、repating-linear-gradient（white 15％、transparent 16％）background-size：60px 60px background-position ：0 0、30px 30px}- 繰り返し-radial-gradient（）： 放射状のグラデーションを繰り返します。放射状のグラデーションで上記で使用したのと同じ例を見てみましょう。
body {background-color：＃001 background-image：repating-radial-gradient（white 15％、transparent 16％）、repating-radial-gradient（white 15％、transparent 16％）background-size：60px 60px background-position ：0 0、30px 30px}フォールバックの背景
フォールバックオプションとして背景色を追加することは、専門家のヒントとして常にお勧めします。特に、背景画像が読み込まれない場合や、開発中に設定したグラデーションの背景が、表示されている古いブラウザの一部でサポートされていない場合に役立ちます。
これはユーザーエクスペリエンスを損なうものではなく、次のように宣言できます。
本文{背景：url（apple_lost.jpg）ピンク}複数の背景
複数の背景画像を設定するオプションもあり、前景画像や背景画像など、ほとんどの場合に必要です。ここでは画像の順序が重要です。最初に前面にあるはずの画像が宣言され、次に最後にあるはずの画像が宣言されます。
以下は、複数の背景画像の例です。
body {background-image：url（ 'small-heart.jpg'）、url（ 'background.jpg'）}PowerBIダッシュボードの作成方法
バックグラウンドリピート
background-repeatプロパティは、background-imageとともに使用され、画像の繰り返し動作を定義します。背景画像を繰り返すかどうか、またどのように繰り返すかを指定します。デフォルトでは、背景画像は垂直方向と水平方向の両方で繰り返されます。
可能な値は次のとおりです。
- 繰り返し-画像は水平方向と垂直方向の両方で繰り返されます
- 繰り返しなし–画像は繰り返されません
- repeat-x –画像は水平方向に繰り返されます
- repeat-y –画像は垂直方向に繰り返されます
- スペース-画像は、間に均等なスペースまたはギャップを置いて繰り返されます。
- ラウンド–画像が繰り返され、隙間なく領域が埋められます。
background-repeatプロパティのCSS構文は次のとおりです。
背景-繰り返し： リピート|リピート-x |リピート-y |リピートなし|スペース|ラウンド
body {background-image：url（ 'heart.png'）、url（ 'background.png'）background-repeat：repeat-y、repeat-x background-color：#ffffff}背景の添付ファイル
ザ・ 背景-添付ファイル プロパティは、コンテンツのスクロール時に画像をスクロールするかどうかを示すために、background-imageとともに使用されます。これは、背景画像を修正するか、ブラウザのウィンドウビューを基準にしてドキュメントと一緒にスクロールする必要があることを意味します。デフォルト値はスクロールです。
可能な値は次のとおりです。
- スクロール–画像はページに沿ってスクロールします。
- 修正済み–画像がページに沿ってスクロールしない
background-attachmentのCSS構文は次のとおりです。
背景-添付ファイル： スクロール|修正済み
body {background-image：url（ 'heart.png'）、url（ 'background.png'）background-repeat：space、round}背景位置
ザ・ 背景位置 プロパティは、背景画像の位置または位置を示すために使用されます。可能な値は次のとおりです。
- 上
- 正しい
- 下
- 左
- センター
- これらの値の組み合わせ（例：左上）
background-positionのCSS構文は次のとおりです。
背景位置： 上|右|左|下|中央
body {background-image：url（ 'heart.png'）background-repeat：no-repeat background-attachment：scroll}CSSサイズの背景画像
このプロパティは、背景画像のサイズを制御できるため、最も便利なプロパティの1つです。このプロパティで使用できるさまざまな組み合わせがあり、それに応じて結果を取得できます。デフォルト値はautoです。
次の値は、background-sizeで使用できます。
- 自動
- 画像の長さ-高さと幅（例： 20px40px。
- パーセンテージ-親要素のパーセンテージとしての画像の高さと幅（例： 50％50％。
- center-画像を中央に揃えます
- カバー、背景領域で完全にカバーするように画像を拡大縮小します。
- 含む、実際の高さと幅になるまで画像を拡大縮小します。
background-positionのCSS構文は次のとおりです。
背景サイズ： 値
body {background-image：url（ 'heart.png'）、url（ 'background.png'）background-repeat：no-repeat、repeat background-size：400px 150px、cover}body {background-image：url（ 'heart.png'）、url（ 'background.png'）background-repeat：no-repeat、repeat background-size：contain、400px 150px}初心者のための私のSQLチュートリアル
背景色
これは、CSSのすべてのプロパティの中で最も単純なものです。ページの背景に単色を適用します。このプロパティの値は、色（赤、青など）、16進値、RGB値で指定できます。
背景色のCSS構文は次のとおりです。
背景色： 値
body {background-image：url（small-heart.jpg）background-color：＃22a8e3}これで、バックグラウンドで使用できるすべてのプロパティが完了しました。デモンストレーションで見たように、プロパティのさまざまな組み合わせをいつでも試すことができます。
CSSは不可欠であり、すべてのフロントエンドWeb開発者のスキルを習得する必要があります。背景のデザインとスタイリングを行い、印象的なWebサイトを構築し、ユーザーエクスペリエンスを向上させるのに役立ちます。最善の方法は、実験を続け、この特別なフロントエンドテクノロジーを最大限に活用することです。これは、驚異的なことを行い、ページを動的に変換できるためです。
私たちをチェックしてください インストラクター主導のライブトレーニングと実際のプロジェクト経験が付属しています。このトレーニングにより、バックエンドおよびフロントエンドのWebテクノロジーを操作するスキルを習得できます。これには、Web開発、jQuery、Angular、NodeJS、ExpressJS、およびMongoDBに関するトレーニングが含まれます。
質問がありますか？ 「CSSの背景画像」ブログのコメント欄にその旨を記載していただければ、折り返しご連絡いたします。