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％不透明度？

非常感谢，

微米。

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的部分（不会验证）并通过conditional comments将它们放入特定目标的CSS文件中。

希望有所帮助。

Answer 2

我相信Lou的答案符合您的要求 - 您只需为每个州定义一个类并设置x和y坐标。

如果你想要褪色的效果，那么jQuery gives you a way to do it。如果是这种情况，这可能会让你得到你想要的东西：

$(".thumb").css("opacity", 0.33);
$(".thumb").hover(
    function() {
        $(this).fadeTo(300, 1.0);
    },
    function() {
        $(this).fadeTo(1, 0.33);
    }
);

编辑：根据反馈进行了更新。现在设置了初始不透明度。

Answer 3

简单方法

{background-position:100% 4px;}

您可以使用带有像素的父级来替换background-position-y属性

Answer 4

Note: For this to work in Mozilla, the background-attachment property must be set to "fixed".

这有什么影响吗？

-

您只有10张图片，只需为每张图片定义一个css类。这样你就可以指定相对x坐标。

PS。我希望你没有使用那个确切的CSS，将该样式应用于：hover将应用于页面上的所有链接。您应该仅将其应用于成像样式。

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

还有opacity..

Answer 5

上一个示例中的一些小遗漏，拼写错误和不必要的代码。猜猜你的代码看起来像这样：

<style>
a { float: left; width: 25px; height: 25px; background-image: url("250_x_50_spriteimage.jpg"); }
a.thumb1 { background-position: 0 0; }
a.thumb2 { background-position: -25px 0; }
a.thumb3 { background-position: -50px 0; }
a { filter: alpha(opacity=30); -moz-opacity:.3; opacity:.3; }
a:hover { filter: alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; }
</style>

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

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

5 个答案: