jquery - 无法调整第二个背景空间的大小

Question

我现在才刚刚开始网络编码，对于我可能想出的任何废话，我深表歉意。

我正在尝试修改网站模板。该网站分为两张背景图片，一张是顶部，略高于页面中间，另一张应该是页面底部。

我想做的是让顶部背景图片进一步向下靠近底部导航栏，而不是让第二个背景图片位于底部导航栏所在的页面底部。

这是完整的 CSS http://pastebin.com/h2KdKtdq

最上面的背景图片部分是

.bg1 {background:url(../images/bg1.gif) center 0 repeat-x; min-height:100%;}

而底部背景图片部分

body { 
background:url(../images/bg.gif) 50% 0 repeat;
font-family:Arial, Helvetica, sans-serif;
font-size:12px; 
line-height:18px;
color:#978e83;
min-width:1003px;
}

奇怪的是，我在 CSS 中对底部图片部分所做的任何操作都不会产生任何效果，而如果我触摸顶部图片部分，它只会弄乱整个布局。

到目前为止，我还没有找到任何选项来使底部背景部分的空间进一步降低，而我确实陷入了困境。

这是样式现在的样子

谢谢

Answer 1

既然你说你是编码新手，我会尽量简化。如果我过于简单化，请原谅我。

实际上我只是写了一个很长的解释，然后注意到地址栏在你的图片中可见 - 我检查了网站，顶部和底部实际上都在 bg1.gif 中。正文背景图像只是使用了更多相同的底部颜色，以覆盖 bg1.gif 底部所在的位置。

所以有一个简单的解决方案:

    .bg1{background-size: 100% 150%;}

只需更改第二个值，色 block 的大小就会发生变化。它所做的只是缩放背景，因为在这种情况下，背景是简单的颜色，所以插值图像应该没有太大问题。

这是解决当前问题的最简单方法。理想情况下，您会对整个背景进行不同的编码。我将在下面发布另一个回复，说明如何执行此操作。

---

编辑:我只是注意到彩色区域之间有一条细线，并且彩色区域几乎没有可察觉的纹理 - 不管我的上述解决方案是否仍然有效，但有轻微的失真。只要您没有过度拉伸(stretch)，就应该没问题。

如果您想在不失真的情况下执行此操作，最简单的解决方案是只编辑图像并在顶部添加更多空间。无论如何，编辑图像是一个好主意，因为当前格式化背景的方式会占用大量开销。背景尺寸为 1309px x 1228px，但使用 repeat-x 后可能只有 10 px 宽。仅此一项就可以将文件大小从 851kb 减少到 ~10kb。