CSS Sprite 垂直重复问题答案

【问题标题】：CSS Sprite vertical repeat problemCSS Sprite 垂直重复问题
【发布时间】：2011-03-31 07:36:07
【问题描述】：

我正在尝试在我的 web 应用程序中包含 css 精灵。问题是我已经在精灵图像中垂直排列了我的网站背景。现在，精灵的一部分需要垂直重复。

我正在尝试以下代码...

#page-wrapper {
    margin: 0px auto;
    background-image: url(../images/background.png);
    height: 100%;
    width: 1000px;
}

#page-wrapper #content {
    background-position: 0px -80px;
    background-repeat: repeat-y;
    height: 1px;
}

我对内容类的高度属性感到困惑。我应该如何定义要重复的部分的高度和 div(#content) 的高度？

问候维克拉姆

【问题讨论】：

背景图像也不会被继承。所以在包装器中设置图像和在内容中的位置将是一个问题

标签： css css-sprites

【解决方案1】：

如果您的精灵在图像中水平排列，您可以垂直重复该精灵。

【讨论】：

@BC ...这条路线可行，但精灵中的所有其他图像必须具有相同的高度或更小（不能更高），以防止垂直重复的精灵出现问题。好主意。

【解决方案2】：

您不能在背景中重复图像的一部分。设置高度只会改变#content 元素的高度。图像总是完全重复。

【讨论】：