-1

您好，我在使用背景图形时遇到问题。

该网站的结构如下：

header 包含两种颜色，固定高度为 100px。大型机应包含具有可变高度的切片图像。页脚包含一种颜色，并且具有 100 像素的固定高度。

所以我的切片图像的高度为 550 像素，并且在页眉和页脚之间完全适合，以防内容不会更大。

<html>
<body>
    <div class="wrapper">

        <div id="header">header</div>

        <div id="mainframe">INSIDE HERE SHOULD BE PLACED THE SLICED IMAGE BUT THE CONTENT IS MORE THAN 550PX</div>

        <div class="push"></div><!--Push for sticky footer-->

</div><!--Wrapper -->

    <div class="footer">footer</div>
</body>

例子

现在的问题是，我的内容将大于 550 像素，并且由于颜色褪色，边缘会变硬，您可以看到图像的结束位置。所以我认为可以自动调整切片背景图像的大小会很好。

有没有办法通过使用 css 来实现这一点？

多谢。

4

3 回答 3

3

简短的回答：不幸的是，没有办法使用 CSS 调整背景图像的大小。

通常，使用 background-repeat:repeat-x; 有一个聪明的解决方法。或背景重复：重复-y；属性，并使用仔细切割的背景图像。

如果您有图像示例，我可能会提供更多帮助。

于 2012-12-04T17:29:57.497 回答
0

你可以试试

background-size:cover;
于 2012-12-04T17:19:12.730 回答
0

尝试

background-size: 100% Auto;
于 2012-12-04T17:07:19.197 回答