13

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

我有一个 CSS sprite 图像，由十（10）个 25px x 25px 图标组成，水平放置 - 因此产生了一个 250px 宽度的 sprite 图像。

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

所以我所做的是创建第二行不透明度为 30% 的图像 - 所以现在我有一个 250 像素 x 50 像素的精灵图像。顶部 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。

4

5 回答 5

12

您不需要第二个图标集，也不需要使用 JavaScript 来达到预期的效果。

正如 Lou 指出的那样，使用opacity30% 或完全可见的图标。没必要再纠缠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 文件中。

希望有帮助。

于 2009-05-20T11:16:28.020 回答
3

我相信 Lou 的答案可以满足您的要求——您只需为每个状态定义一个类并设置 x 和 y 坐标。

如果你想要渐变的效果，那么jQuery 为你提供了一种方法来实现它。如果是这种情况，这可能会让你得到你想要的：

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

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

于 2009-05-04T01:36:26.080 回答
3

简单的方法

{background-position:100% 4px;}

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

于 2010-12-03T11:32:12.697 回答
1

注意：为了在 Mozilla 中工作，必须将 background-attachment 属性设置为“fixed”。

这有关系吗？

--

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

附言。我希望您没有使用确切的 css，将该样式应用于 a: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; }

还有不透明..

于 2009-05-03T20:58:48.603 回答
0

前面例子中的一些小疏漏、错别字和不必要的代码。猜猜你的代码可能看起来像这样：

<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>
于 2009-06-19T18:45:05.023 回答