1

ブラウザウィンドウのサイズが変更されたときに、Webページの背景画像のサイズを変更することはできますか？

4

3 に答える 3

2

CSS3を使用する場合は、次のbackground-sizeように使用して目的の結果を得ることができるという新しいプロパティがあります。

body {
  background: url(bgimage.jpg) no-repeat;
  background-size: 100%;
}

CSS3はまだすべてのブラウザ（特にIE）で完全にサポートされているわけではなく、ページを表示するブラウザによって結果が異なる場合があることに注意してください。そうは言っても、それがお役に立てば幸いです。

よりブラウザフレンドリーなものが必要な場合は、ウィンドウのサイズ変更をキャプチャし、それに応じて画像を拡大するjavascriptソリューションを検討できます。

于 2010-06-18T00:11:20.847 に答える
2

次のコードは、クロスブラウザの背景画像を作成する方法を示しています。

<?xml version='1.0' encoding='UTF-8' ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>Cross Browser Background</title>

    <style type="text/css">
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

      #background {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }

      #content {
        z-index: 1; /* The content should be above the background image */

        margin: 20px 30px;
        background-color: #000;
        color: #FFF;
        padding: 10px 15px;

        /* Just add some fancy transparency */
        opacity: .85; /* Standard: FF gt 1.5, Opera, Safari */
        filter: alpha(opacity=50); /* IE lt 8 */
        -ms-filter: "alpha(opacity=50)"; /* IE 8 */
        -khtml-opacity: .50; /* Safari 1.x */
        -moz-opacity: .50; /* FF lt 1.5, Netscape */
      }
    </style>

    <!-- IE6 sucks as usual - Add some special code for it -->

    <!--[if IE 6]>
      <style type="text/css">
        html {
          overflow-y: hidden;
        }

        body {
          overflow-y: auto;
        }

        #background {
          position:absolute;
          z-index:-1;
        }

        #content {
          position:static;
        }
      </style>
    <![endif]-->
  </head>
  <body>
    <img id="background" src="background.jpg" alt="" />

    <div id="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquam placerat justo, in tincidunt purus faucibus quis. Pellentesque facilisis mi id neque laoreet laoreet. Quisque quis metus vitae enim lacinia egestas eu at ipsum. Proin sed justo massa, non consequat lacus. Nullam pulvinar commodo egestas. Vivamus commodo ligula a turpis mattis facilisis. Vestibulum vel massa a lorem pulvinar varius nec ut justo. Donec hendrerit dapibus erat. Aenean interdum, lorem sit amet venenatis tincidunt, augue ipsum tincidunt velit, vel egestas nulla quam non quam. Mauris vulputate libero at purus auctor sed egestas magna vehicula.</p>
    </div>
  </body>
</html>
于 2010-06-18T00:39:29.007 に答える
1

はい、このように：

<img id="background" src="..." alt="Background Image" />

img#background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
    height: 100%;
}
于 2010-06-18T00:12:13.503 に答える