当前位置：文江博客话题详情

网站背景可调整大小

发布于 2024-09-06 06:23:47 字数 34 浏览 1 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

荒岛晴空 2024-09-13 06:23:47

以下代码展示了如何制作跨浏览器背景图片：

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

The following code shows how to make a cross browser background image:

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

回复收藏 0 原文

很糊涂小朋友 2024-09-13 06:23:47

如果您使用 CSS3，您将有一个名为 background-size 的新属性，您可以像这样使用它来实现您想要的结果：

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

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

如果您想要更适合浏览器的东西，您可以考虑使用 javascript 解决方案，该解决方案将捕获窗口大小调整并相应地拉伸图像。

If you use CSS3 you have a new property called background-size that you can use like this to achieve your desired result:

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

Keep in mind that CSS3 is still not fully supported by all browsers (specially IE) and results may vary depending on which browser you view the page with. That said, hope it helps!

If you want something more browser friendly you could consider a javascript solution that will capture window resizes and stretch the image accordingly.

回复收藏 0 原文

中二柚 2024-09-13 06:23:47

是的，像这样：

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

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

Yes, like this:

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

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

回复收藏 0 原文

~没有更多了~