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

Question

好的...所以这里是问题。

我有一个CSS精灵图，由水平排列的十个(10) 25像素 x 25像素的图标组成，因此结果是一个250像素宽的精灵图。

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

所以我创建了一行第二组图像，它们的不透明度为30% - 现在我有一个250像素 x 50像素的精灵图。顶部25像素为100%，底部25像素为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; }

不幸的是，这似乎不起作用，因为background-position-y在Firefox中不受支持（或者不是标准，只是IE特有的）。

我们的想法是仅将精灵图像沿y轴向上移动，并保留x轴不变（或设置为以前的类中设置的值）。

如果没有简单的CSS解决方案-是否可以使用JQUERY实现此不透明效果？ 因此，当用户悬停时，拇指将以30％的不透明度加载，并过渡到100％的不透明度？

非常感谢，

M.

- Mo Boho

---

https://dev59.com/m1TTa4cB1Zd3GeqPogcQ 这个网页涉及到类似的问题。 - feeela

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文件中。希望能够帮到您。

- WrongAboutMostThings

---

这个技巧真的很棒！我希望更多的人会点赞它并使其成为最佳答案。 - Jesper Rønn-Jensen

Answer 2

简单易懂的方法

{background-position:100% 4px;}

您可以使用百分比和像素来替代background-position-y属性。

- iMezied

Answer 3

我相信Lou的答案可以实现您想要的功能——您只需要为每个状态定义一个类并设置x和y坐标即可。

如果您想要淡出的效果，那么jQuery提供了一种方法。如果是这种情况，这可能可以帮助您获得所需的效果：

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

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

- Zack The Human

---

嗨，Zack，唯一的问题是使用该方法会导致膨胀的代码问题，当有很多缩略图时会出现这种情况。我希望能够减少代码量...因此也许我们必须使用 jQuery 来解决这个问题。那么对于你上面的例子，它最初是淡出的吗？然后再淡入到 100%？还是我们先在 CSS 中设置不透明度，然后再淡入到 100%？是否有一种方法可以在 jQuery 中完成所有这些操作（包括初始不透明度），因为不透明度是 CSS3 标准，我们知道这在整个谱系中仍然没有完全支持？ - Mo Boho

谢谢你，Zack！:) 虽然我更喜欢使用CSS解决方案，但如果没有合适的，我们就用jQuery吧！:) 非常感谢你的帮助。 - Mo Boho

Answer 4

注意：要在 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; }

还有不透明度..

- lsl

---

很遗憾，它不行。我们会完全失去背景图片。 - Mo Boho

已更新示例代码：我认为它似乎做了你想要的。 - lsl

我知道你在做什么 - 分别在每个元素上设置 :hover - 并且在我提供的示例中是可以的。唯一的问题是，当你有更多数量的缩略图时 - 当我们为每个缩略图添加所有这些额外的 :hover 条目时，我们最终会得到很多膨胀的 CSS。如果有 (或者是否存在) 一些 BACKGROUND-POSITION-Y 命令，那就好了 - 它将仅允许我们沿着 Y 轴移动所引用的项目，同时保留先前设置的 X 轴。 - Mo Boho

JavaScript在这里很适合。 - lsl

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>

- Michiel