好的,所以这里是问题.
我有一个由十(10)个25px x 25px图标水平布局的CSS精灵图像,从而导致一个250px宽的精灵图像.
我使用这些25×25图像作为缩略图.我希望在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特定的).
这个想法是,我们(仅)想要将精灵图像UP(沿y轴)移动,并将x轴保持原样(或在先前的类中设置).
如果没有简单的CSS解决方案 – 这个不透明度效果可以用JQUERY来完成吗？所以拇指会以30％的不透明度加载,并且在用户悬停时会转换到100％的不透明度？
非常感谢,
M.
解决方法
您不需要第二个图标集,也不需要使用JavaScript来实现所需的效果.
正如Lou指出的,使用不透明度使您的图标成为30％或完全可见.不需要再混淆背景位置了.
只需按照以下步骤定义您的样式：
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文件中.
希望有帮助.
