ホームページ > ウェブフロントエンド > CSSチュートリアル > HTML または本文を使用して星の背景画像を作成するには?

HTML または本文を使用して星の背景画像を作成するには?

Patricia Arquette
リリース: 2024-10-25 08:55:02
オリジナル
1076 人が閲覧しました

How to Create Stellar Background Images Using HTML or Body?

HTML または本文の優れた背景画像を作成する

Web ページの本文全体にわたる印象的な背景画像を組み込む場合は、主なセレクターとして HTML を使用するか本文を使用するかの選択が生じる可能性があります。

HTML 要素と body 要素の両方に対応する最も効果的なアプローチは次のとおりです。

<code class="css">body {
    background-image: url('../images/background.jpg');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}</code>
ログイン後にコピー

各プロパティの目的を調べてみましょう:

  • background-image: url('../images/background.jpg'): 目的の背景画像へのパスを指定します。
  • background-attachment:fixed: ページがスクロールするときに背景画像を固定し、指定された位置に確実に留まるようにします。
  • background-repeat: no-repeat:画像が本文より小さい場合でも、背景全体で画像が繰り返されるのを防ぎます。
  • background-size: cover: アスペクト比を維持しながら、本文要素を完全にカバーするように画像を拡大縮小します。 .

CSS ファイルは別のディレクトリに置く必要があり、画像へのパスもそれに応じて調整する必要があることに注意してください。このテクニックを利用すると、Web ページ全体の美しさを高める素晴らしい背景画像を簡単に作成できます。

以上がHTML または本文を使用して星の背景画像を作成するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート