将 2 个图像作为背景放置在一个主体上

发布于 2025-01-07 22:59:42 字数 385 浏览 0 评论 0 原文

亲爱的访客 stackoverflow!

我无法解决一个简单的问题: 正文给定图片的背景“1.jpg”(它会自动压在标题上), 我仍然需要放置一张图片 - "2.jpg" 来按下与页脚相反的位置。也就是说,我需要在高度上进行一些“橡胶布局”,以便当页面高度很大时图像会滑动,而当内容不够时图像会滑动。我很乐意链接一个工作示例(甚至不是演示,而只是我自己查看源代码的网站),但至少我会感谢通常的建议和想法!先感谢您。

抱歉英语不好,我试图写得好。

更新:

非常感谢您的回答。别关注我的事 只选了一个,你们帮助了我,我谢谢你们!

Dear visitors stackoverflow!

I can not solve a simple problem:
Body given the background of the picture "1.jpg" (it is automatically pressed against the header),
I still need to put a picture - "2.jpg" to be pressed on the contrary to the footer. That is, I need some "rubber layout" in height, so that images were sliding when the height of the page is large, and would come when the content is not enough. I would be happy to link a working example (not even a demo, but just a site that I myself look the source code), but at least I would be grateful for the usual suggestions and ideas! Thank you in advance.

Sorry for bad English, I tried to write competently.

update:

Thank you very much for your answers. Do not pay attention to what I
chose only one, you helped me and I thank you all!

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

扫码二维码加入Web技术交流群

发布评论

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

评论(3

烟花肆意 2025-01-14 22:59:42

使用 css 将图像 1.jpg 放在正文背景中,将 2.jpg 放在页脚背景中。

我不知道你的图像的大小是多少,所以你可以看到下面的链接来获得一些帮助 -

http://css-tricks.com/snippets/css/fixed-footer/

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

Put you image 1.jpg in body background using css and 2.jpg in background of footer.

I dont know what are the sizes of your images so You can see the below link to get some help -

http://css-tricks.com/snippets/css/fixed-footer/

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

夏了南城 2025-01-14 22:59:42

您可以使用 CSS3 实现此目的:

body {
    background: url("1.jpg") top left,
        url("2.jpg") bottom right;
}

如果您需要对旧版浏览器的支持 (请参阅此处了解当前支持),您必须为第二张图像使用标签。

You can achieve this with CSS3:

body {
    background: url("1.jpg") top left,
        url("2.jpg") bottom right;
}

If you require support for older browsers (See here for current support), you will have to use an tag for the second image.

如果没结果 2025-01-14 22:59:42

为了获得完整的浏览器支持,我将在 上设置一个图像,然后在站点容器上设置另一个图像,例如

HTML

<html>
  <head>
    <title>Title!</title>
  </head>
<body>
  <div id="site">
    [Your website here]
  </div>
</body>

CSS

body {background: url(img/image-1.jpg) top no-repeat;}
#site {background: url(img/image-2.jpg) bottom no-repeat;}

For full browser support, I'd have one image set on the <body>, and then another image set on a site container, e.g. <div id="site">

HTML

<html>
  <head>
    <title>Title!</title>
  </head>
<body>
  <div id="site">
    [Your website here]
  </div>
</body>

CSS

body {background: url(img/image-1.jpg) top no-repeat;}
#site {background: url(img/image-2.jpg) bottom no-repeat;}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文