Question

是否可以在调整浏览器窗口大小时调整网页的背景图像大小？

Answer 1

如果您使用 CSS3 ，则会有一个名为background-size的新属性，您可以像这样使用它来获得所需的结果：

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

请记住，所有浏览器（特别是IE）仍然不完全支持CSS3，结果可能会有所不同，具体取决于您查看该页面的浏览器。那说，希望它有所帮助！

如果你想要更友好的浏览器，你可以考虑一个javascript解决方案，它将捕获窗口大小并相应地拉伸图像。

Answer 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>

Answer 3

是的，就像这样：

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

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

网站上可调整大小的背景

3 个答案: