调整窗口大小时标题图像停止重复

发布于 2024-09-14 09:35:37 字数 293 浏览 6 评论 0原文

所以我在页面顶部粘贴了一张图像，该图像一直在顶部重复。由于某种原因，当我调整窗口大小然后向右滚动时，它会停止重复。 div 是包装器之外的文档中的第一个。有什么想法吗？

#header {
    background-image:url('http://daveywhitney.com/img/paperhead.png');
    background-repeat: repeat-x;
    width: 100%;
    height: 145px;
    margin:0 0 20px 0;

}

原文

So i have an image in stuck to the top of my page that repeats all the way across the top. For some reason when I resize the window and then scroll over to the right it stops repeating. The div is the first in the document outside of the wrapper. Any ideas?

#header {
    background-image:url('http://daveywhitney.com/img/paperhead.png');
    background-repeat: repeat-x;
    width: 100%;
    height: 145px;
    margin:0 0 20px 0;

}

分享到QQ

分享到微博

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

发布评论

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

桃扇骨 2024-09-21 09:35:37

这似乎在 FireFox 中工作得很好。调整窗口大小时检查父元素的宽度。

回复收藏 0 原文

ヤ经典坏疍 2024-09-21 09:35:37

您的代码设置的可用基准是：-

宽度 - 100%（因此考虑图像的全宽度）
“背景重复 - x”- 图像将在内部水平重复

，假设图像的宽度为 250 像素 & 250 像素。整个浏览器屏幕的宽度为 1024px。因此从技术上讲，图像将水平重复至少 5 次，其中全尺寸重复 4 次，全尺寸重复 4 次。最后一个将显示一点。

现在，如果您调整浏览器的大小或在弹出窗口中查看相同的网页，您的浏览器屏幕的宽度必然会被修改。假设现在您的浏览器屏幕宽度为 220px。由于图像宽度大于浏览器屏幕宽度（在这个特定的测试用例中），因此图像根本不会重复，&您也将无法看到完整图像。

并不是说有什么bug，只是逻辑部分，我们需要理解。

希望有帮助。

回复收藏 0 原文

dawn曙光 2024-09-21 09:35:37

从您提供的详细信息中很难看出，但这里有一个可能可以解决问题的答案。添加以下内容

#header {
    background-image:url('http://daveywhitney.com/img/paperhead.png');
    background-repeat: repeat-x;
    width: 100%;
    height: 145px;
    margin:0 0 20px 0;
    overflow:hidden;
    position:relative}

#wrapper {width:960px;margin:0 auto;position:relative}

It's hard to tell from the details you have provided but here is a answer that might do the trick. Add the following

#header {
    background-image:url('http://daveywhitney.com/img/paperhead.png');
    background-repeat: repeat-x;
    width: 100%;
    height: 145px;
    margin:0 0 20px 0;
    overflow:hidden;
    position:relative}

#wrapper {width:960px;margin:0 auto;position:relative}

回复收藏 0 原文