jQuery 仅 Y 轴上的 CSS 背景位置更改
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/817866/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS background-position change on Y-Axis only
提问by Mo Boho
Ok...so here is the problem.
好的……所以问题来了。
I have a CSS sprite image made up of ten(10) 25px x 25px icons laid out horizontally - thus resulting in a sprite image of 250px width.
我有一个由十 (10) 个 25px x 25px 图标组成的 CSS 精灵图像，水平排列 - 从而产生 250px 宽度的精灵图像。
I am using these 25x25 images as thumbnails. I'm looking to have an opacity of 30% on these images in INITIAL view and when a user hovers over them the opacity needs to be 100% (1).
我使用这些 25x25 图像作为缩略图。我希望在初始视图中这些图像的不透明度为 30%，当用户将鼠标悬停在它们上方时，不透明度需要为 100% (1)。
So what I did was create a SECOND row of images with their opacity at 30% - so now I have a sprite image of 250px x 50px. The top 25px at 100% and the bottom 25px at 30%.
所以我所做的是创建第二行图像，其不透明度为 30% - 所以现在我有一个 250px x 50px 的精灵图像。顶部 25px 为 100%，底部 25px 为 30%。
I setup HTML as follows:
我按如下方式设置 HTML：
<a href="largeimage1.jpg" class="thumb1"></a>
<a href="largeimage2.jpg" class="thumb1"></a>
<a href="largeimage2.jpg" class="thumb1"></a>
etc...
and the CSS:
和 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; }
However, this doesn't appear to work unfortunately, as background-position-y is NOT supported in Firefox (or is not a standard, but is IE-specific).
但是，不幸的是，这似乎不起作用，因为 Firefox 不支持 background-position-y（或者不是标准，但特定于 IE）。
The idea is that we (only) want to SHIFT the sprite image UP (along y-axis) and leave the x-axis as is (or was set in the previous classes).
这个想法是我们（仅）想要将精灵图像向上移动（沿 y 轴）并保持 x 轴不变（或在之前的类中设置）。
If there is no simple CSS solution to this - can this opacity effect be done with JQUERY? So the thumbs would load at 30% opacity and would transition to 100% opacity when user hovers?
如果没有简单的 CSS 解决方案 - 这种不透明效果可以用 JQUERY 来完成吗？那么拇指会以 30% 的不透明度加载，并在用户悬停时转换为 100% 的不透明度？
Many thanks,
非常感谢，
M.
M。
采纳答案by WrongAboutMostThings
You do not need a second icon set nor the use of JavaScript to achieve the desired effect.
您不需要第二个图标集，也不需要使用 JavaScript 来达到预期的效果。
As Lou pointed out, use opacityto make your icons 30% or fully visible. No need to mess with background-positionanymore.
正如 Lou 指出的那样，用于opacity使您的图标 30% 或完全可见。没必要再纠缠background-position了。
Just go ahead and define your styles accordingly to the following:
只需继续并根据以下内容定义您的样式：
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; }
If you are worried about validation of your CSS code, take the IE-specific parts (which won't validate) and put them in specifically targeted CSS files via conditional comments.
如果您担心 CSS 代码的验证，请获取特定于 IE 的部分（不会验证）并通过条件注释将它们放入专门针对的 CSS 文件中。
Hope that helps.
希望有帮助。
回答by Zack The Human
I believe Lou's answer does what you want it to do -- you just have to define a class for each state and set both x and y coordinates.
我相信 Lou 的回答可以满足您的要求——您只需为每个状态定义一个类并设置 x 和 y 坐标。
If you wanted the effect of fading, then jQuery gives you a way to do it. This could probably get you what you want if that's the case:
如果你想要褪色的效果，那么jQuery 给了你一种方法。如果是这样的话，这可能会让你得到你想要的：
$(".thumb").css("opacity", 0.33);
$(".thumb").hover(
function() {
$(this).fadeTo(300, 1.0);
},
function() {
$(this).fadeTo(1, 0.33);
}
);
EDIT: Updated based off feedback. Initial opacity is now set.
编辑：根据反馈更新。现在设置初始不透明度。
回答by iMezied
easy way
简单的方法
{background-position:100% 4px;}
you can use parentage with pixel to substitute background-position-y property
您可以使用带有像素的血统来替换 background-position-y 属性
回答by Louis
Note: For this to work in Mozilla, the background-attachment property must be set to "fixed".
注意：为了在 Mozilla 中工作，背景附件属性必须设置为“固定”。
Does that have any bearing?
这有什么讲究吗？
--
——
You only have 10 images, just define a css class for each one. That way you can specify the relative x coord.
您只有 10 张图片，只需为每张图片定义一个 css 类。这样你就可以指定相对的 x 坐标。
ps. I hope you aren't using that exact css, applying that style to a:hover would apply to all links on the page. You should be applying it to only the imaged style.
附：我希望您没有使用那个确切的 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; }
There is also opacity..
还有不透明..
回答by Michiel
Some small omissions, typos and unnecessary code in the previous example. Guess your code could look something like this:
上例中的一些小遗漏、错别字和不必要的代码。猜猜你的代码可能是这样的：
<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>
