1

我想制作一个带有背景图像的面板，可以垂直调整大小。所以简单的想法是将实际图像分成三部分：页眉、正文重复部分、页脚。它看起来像这样

<tr><td><div class='header'></div></td></tr>
<tr><td><div class='body'>whatever goes here</div></td></tr>
<tr><td><div class='footer'></div></td></tr>

.header {background:url(header.png); width:110px; height:20px;}
.footer {background:url(footer.png); width:110px; height:40px;}
.body {background:url(body-repeat.png); repeat-y; width:110px;}

因此，我将 100x100 的图像分成三部分 - header.png - 100x20、footer.png - 100x40 和 body-repeat.png - 100x1

在 Ie9 和 firefox 中一切正常。甚至 chrome 在 100% 缩放下也能正常工作。但是，当我在 Chrome 中更改缩放时，图片会变成锯齿状，即您可以看到它是由 3 个部分“粘合”而成的。显然 chrome 对这些图像的缩放比例不同。

所以我的问题是 - 这可以以某种方式解决吗？或者有没有办法用背景图像制作可调整大小的面板？

非常感谢您的回复。

4

1 回答 1

0

您可以尝试在表格和 div 上强制没有填充、边框和边距，然后尝试添加 CSS3 背景大小属性！

.header {
background-image:url(header.png); 
background-size:110px 20px;
}

有关 CSS 背景大小属性的更多信息：http: //www.w3schools.com/cssref/css3_pr_background-size.asp

最好在制作布局结构时尽量避免使用表格:)

编辑： 您也可以尝试添加

背景尺寸：封面；

整个页面背景上的属性，因此背景图像将适合给定区域的宽度和高度的 100%。

关于背景大小的一个很棒且非常完整的教程：http ://www.css3.info/preview/background-size/

于 2012-09-29T22:38:43.237 回答