gpt4 book ai didi

css - 主要内容周围的背景元素有问题

转载 作者:行者123 更新时间:2023-11-28 19:08:55 24 4
gpt4 key购买 nike

我有这个网站,我需要在页面顶部内容的每一侧放置两个图像。暂时可以达到[移除]。

如果您的分辨率足够宽,您可以看到左右红色圣诞装饰品都与主要内容对齐。但是,如果浏览器的宽度小于 ~1300 像素,则正确的滚动条不会从页面流中取出并创建一个水平滚动条。

我通过将两个带有背景的绝对定位的 div 放置到一个相对定位的 div 中来实现这两个装饰:

<div id="alignment"> <!-- position:relative -->
<div></div> <!-- first image: position:absolute;right:-210px -->
<div></div> <!-- second one: position:absolute;right:915px -->
</div>

虽然绝对定位元素应该从文档流中移除,但第二张图片不是 :( 因此,底部滚动条出现了。

我尝试过的:

  • 用 910 像素(内容的宽度)的空白空间制作两个装饰品的图像,并且只使用一个绝对 div 而不是两个:同样的问题
  • 将上述图像添加为 no-repeat top center <html>的背景结果只显示一个背景。要么我在body上有雪花bg 或纯白色背景上的红色装饰品。后者取决于两个(body 或 html)元素中的哪一个以哪个图像作为背景。
  • 将图像 div 放在绝对 div 中并使两者相对(与当前情况相反)- 同样的问题并且不会显示在 < 上IE8

我知道并且很抱歉这是一个大问题并且难以理解。我研究了很多,但没有想法。任何可能的尝试解决方案将不胜感激。另外,我意识到我链接到的网站的编码处于糟糕的边缘,但我才刚刚开始处理它,所以对此没有评论,请:)

最佳答案

最终的解决方案是创建一个 div,它在 body 之后打开并包含 所有 内容,在 body 之前关闭。 div的样式:

background: url('/client/images/xmas-burbulai.png') no-repeat top center;

png 本身就是我想要在 body 两侧的两个装饰。两张图片都粘贴成一张,中间留有 910 像素的空隙——正好是 body 的宽度。

没有滚动条,跨浏览器,时尚。

关于css - 主要内容周围的背景元素有问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1834717/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com