仅在Y轴上的CSS背景位置更改

Question

好的......所以这就是问题所在.

我有一个CSS精灵图像,由十(10)个25px x 25px图标组成,水平排列 - 从而产生250px宽的精灵图像.

我使用这些25x25图像作为缩略图.我希望在INITIAL视图中对这些图像的不透明度为30%,当用户将鼠标悬停在它们上方时,不透明度需要为100%(1).

所以我所做的是创建一个第二行图像,其不透明度为30% - 所以现在我有一个250px x 50px的精灵图像.前25px为100%,下25px为30%.

我按如下方式设置HTML:

<a href="largeimage1.jpg" class="thumb1"></a>
<a href="largeimage2.jpg" class="thumb1"></a>
<a href="largeimage2.jpg" class="thumb1"></a>
etc...

和CSS:

a { display: block; float: left; width: 25px; height: 25px; background: url("250_x_50_spriteimage.jpg") 0 -25px no-repeat; }
.thumb1 { background-position: 0 0; }
.thumb2 { background-position: -25px 0; }
.thumb3 { background-position: -50px 0; }
a:hover { **background-position-y**: -25px; }

但是,遗憾的是,这似乎不起作用,因为Firefox不支持background-position-y(或者不是标准的,但是IE特定的).

我们的想法是,我们(仅)想要将精灵图像向上移动(沿y轴)并保持x轴不变(或在之前的类中设置).

如果没有简单的CSS解决方案 - 这种不透明效果可以通过JQUERY完成吗？所以拇指会以30%的不透明度加载并在用户徘徊时转换为100%不透明度？

非常感谢,

M.

Answer 1

您不需要第二个图标集,也不需要使用JavaScript来实现所需的效果.

正如Lou所指出的,用于opacity使您的图标达到30%或完全可见.不用再乱background-position了.

请继续并根据以下内容定义您的样式:

a {
    opacity:0.3;  /* for standard browsers */
    filter: alpha(opacity = 30);  /* for IE */

    display: block;
    float: left;
    width: 25px;
    height: 25px;
    background: url("250_x_50_spriteimage.jpg") 0 -25px no-repeat;
}

a:hover {
    opacity:1.0
    filter: alpha(opacity = 100);
}

.thumb1 { background-position: 0 0; }
.thumb2 { background-position: -25px 0; }
.thumb3 { background-position: -50px 0; }

如果您担心CSS代码的验证,请使用特定于IE的部分(不会验证)并通过条件注释将它们放入特定目标CSS文件中.

希望有所帮助.