Y轴上的CSS背景位置变化只有

我有一个由10（25）x 25像素图标水平排列的CSS sprite图像 - 因此产生250像素宽度的精灵图像。

我使用这些25x25图像作为缩略图。我希望在INITIAL视图中对这些图像具有30％的不透明度，并且当用户将它们悬停在它们上面时，不透明度需要为100％（1）。

所以我做的是创建一个第二行的图像，其不透明度在30％ - 所以现在我有一个250像素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; }

然而，这似乎并没有遗憾的工作，因为背景位置-Y不是在Firefox支持（或者不是一个标准，但是是特定于IE的）。

这个想法是，我们（仅）想要将精灵图像向上（沿y轴）移动，并保持x轴原样（或在前面的类中设置）。

如果没有简单的CSS解决方案 - 可以用JQUERY完成这种不透明效果吗？所以大拇指会以30％的不透明度加载，并且在用户悬停时会过渡到100％不透明度？

非常感谢，

来源

2009-05-03 Mo Boho

http://stackoverflow.com/问题/ 4900212 /只能改变背景图像通过jquery包含类似的问题 – feeela 2011-12-09 15:18:22

你不需要第二个图标集，也不需要使用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文件。

希望有所帮助。

来源

2009-05-20 11:16:28 WrongAboutMostThings

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

这是否有什么影响？

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

ps。我希望你没有使用那个确切的CSS，将这种风格应用于：悬停将适用于页面上的所有链接。你应该只将它应用于成像风格。

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..

来源

2009-05-03 20:58:48 Louis

不，不幸的是，不幸的是。我们完全失去了背景图像。 – 2009-05-03 21:50:36

修改后，希望它有帮助 – Louis 2009-05-04 00:54:48

更新了示例代码：似乎做你想做的事我认为。 – Louis 2009-05-04 01:14:18

我相信娄的答案是你想要它做的事情 - 你只需要定义每个国家一类，并设置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); 
    } 
);

编辑：基于更新过的反馈。现在设置了初始不透明度。

来源

2009-05-04 01:36:26

上例中的一些小的遗漏，错别字和不必要的代码。猜测你的代码可能是这个样子：

<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-19 18:45:05 Michiel

简单的方法

{background-position:100% 4px;}

可以使用亲子同像素替代背景位置，y属性

来源

2010-12-03 11:32:12 iMezied

Y轴上的CSS背景位置变化只有

回答

相关问题