Question

我有一个渐变图像作为表头（9x18pix）的背景。该图像通过选择器类调用。当标题内容增长到2行（垂直高度增加）时，bg图像垂直平铺并且看起来很难看。如何在不平铺的情况下垂直拉伸bg图像？

Answer 1

你无法伸展它。好吧，不是没有一些令人讨厌的CSS黑客，这在所有可用的浏览器中都不会真正起作用。我不会使用它们（除非您的HTML代码仅针对单个浏览器，例如，如果它是内部使用的页面，并且已知使用的浏览器）。但是，你可以在一个方向上重复它。这是你在拥有渐变时通常想要的。

background-repeat: repeat-x;

以下是一个示例图片：

alt text

以下是使用它的HTML代码

<html>
<head><title>Gradient Test</title>
<style type="text/css">
    th {
        color:brown;
        background-image:url(http://img222.imageshack.us/img222/6586/fillhz2.png);
        background-repeat:repeat-x;
        margin: 0;
    }
</style>
</head>
<body>
    <table>
        <tr>
            <th>One line</th>
            <th>Three<br>lines<br>of text</th>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
        </tr>
    </table>
</body>
</html>

它会重复，但只能在一个方向内重复。通常可以在一个方向上安全地重复渐变，不需要拉伸它。

Answer 2

你在这里遇到的问题是你的背景正在重复，Mecki的评论是正确的并且应该解决你的问题，背景图像将一直重复，除非你说明它应该重复哪种方式，如果有的话。

这是一个链接到所有不同的CSS背景属性，可能会帮助你一点点： http://www.w3schools.com/css/css_background.asp

Answer 3

首先，我假设您正在使用CSS来放置此背景图像。您可能需要澄清这部分答案。

我不相信有一个css功能可以用来使你的背景图像伸展。正如Mecki所说，您可以使用背景重复来水平平铺图像，但这不会处理扩展超出原始图块高度的标题。

解决这个问题最简单的方法就是让你的背景足够大，以适应几行或更多。

因此，如果您将背景设置为40px或稍大，那么您不会在文件大小方面添加大量内容，但是您的设计更加灵活。

一般而言，就布局和图形而言，最好是建立一定的灵活性，以应对浏览器的不一致性和不同的用户需求。

Answer 4

或者，您可以将容器的背景颜色设置为与渐变中最后一行相同的颜色。这样，渐变图像的末尾将是不可见的。

Answer 5

梯度测试 th { 颜色：棕色; 背景图像：网址（http://img222.imageshack.us/img222/6586/fillhz2.png）; 背景重复：重复; 保证金：0; } 一条线三行文字数据数据

表标题背景图像垂直平铺

5 个答案: