HTMLで背景画像のサイズを設定する方法-フロントエンドQ&A-php.cn

Web デザインにおいて、背景画像は、より良いユーザーエクスペリエンスを提供し、ユーザーの注意を引くことができる重要な視覚要素です。ただし、背景画像のサイズが適切でない場合は、Web ページ全体の美しさや読み込み速度に影響を与える可能性があります。この記事では、Web ページの外観とパフォーマンスを最適化するために、HTML を使用して背景画像のサイズを設定する方法を学びます。

CSS スタイルシートの使用

CSS スタイルシートを使用するのが、背景画像のサイズを設定する最も簡単な方法です。 HTML では、<style> タグを使用して CSS スタイルシートを Web ページに埋め込み、背景画像の幅と高さを設定できます。

これは例です:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-image: url('background.jpg');
      background-size: 100% 100%;
    }
  </style>
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

ログイン後にコピー

上記のコードでは、CSS スタイルシートを <style> タグに埋め込みます。 body 要素の背景画像を設定し、background-image 属性を使用して画像の URL を指定します。次に、background-size プロパティを使用して、画像サイズを幅 100%、高さ 100% に設定します。

Web ページを開くと、背景画像が自動的に画面全体に表示されます。

属性タグの使用

背景画像のサイズを設定するもう 1 つの方法は、<body> の style## を使用することです。 タグ #属性。

これは例です:

<!DOCTYPE html>
<html>
<head>
</head>
<body style="background-image: url(&#39;background.jpg&#39;); background-size: cover;">
  <h1>Hello, World!</h1>
</body>
</html>

ログイン後にコピー

この例では、

style 属性を タグ内に直接設定します。背景画像を background-image プロパティの値として指定し、background-size プロパティを使用して画面全体をカバーする画像サイズを設定します。

この方法を使用すると、背景画像のサイズをすばやく設定できますが、この方法の欠点は、スタイルシートを使用して制御するほど柔軟ではないことです。

もう 1 つの方法は、JavaScript を使用して背景画像のサイズを設定することです。このメソッドは、Web ページがスクロールされたときに背景画像のサイズを変更するなど、動的な背景画像を実装するために使用できます。

これは例です:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-image: url('background.jpg');
    }
  </style>
  <script>
    window.addEventListener('scroll', function() {
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      var body = document.querySelector('body');
      body.style.backgroundSize = (100 + scrollTop / 5) + '%';
    });
  </script>
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

ログイン後にコピー

この例では、JavaScript コードを使用して背景をウィンドウとしてリアルタイムで変更する

人気のチュートリアル

詳細>