CSS sprites无法正常工作

Question

我在精神图像中有10个像素大小的图像我想将该图像作为背景应用于此标题文本我的css代码：

.header-text {
    background:url(images/sp-images.jpg);
    background-position-x: -0px;
    background-position-y: -28px;
}

我的HTML代码：

<h1 class="header-text">let's Knockout Poverty in India!</h1>!

i want to apply that red shadow image as a background to the header text

Answer 1

CSS精灵无法在两个方向上平铺。如果垂直堆叠精灵，可以将它们水平平铺;如果你将它们水平排列，你可以垂直平铺它们。

看着你的图像，它似乎有两个2格的四个图像。以这种方式设置，您将只能在非重复背景中使用这些精灵。

Answer 2

据我所知，background-position-x and -y are supported only in IE, Chrome and Safari, but not in Firefox or Opera

你应该写的是什么;

.header-text {
background:url(images/sp-images.jpg) 0 -28px;

}

我不知道你是否想重复它。默认行为是重复。如果你想重复它，那么你将不得不移动剩下的图像......