CSS CSS3 背景图片位置转换
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5760908/
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
CSS3 background image position transition
提问by Sean
I want a CSS3 hover effect on my website's logo. Easy, right? Well it works, but not the way I want it to.
我想在我的网站徽标上使用 CSS3 悬停效果。很简单，对吧？好吧，它有效，但不是我想要的方式。
The top half of it is the regular state and the bottom half is the :hover state.
它的上半部分是常规状态，下半部分是 :hover 状态。
I have the standard CSS for changing the background position on :hover, but the CSS3 transition slides the image up and down with the position. Instead, I want it to simply fade in and out to the new position.
我有用于更改 :hover 背景位置的标准 CSS，但是 CSS3 过渡会随着位置上下滑动图像。相反，我希望它只是淡入淡出到新位置。
Is this possible when working with one image and two positions or will I have to make two separate images (which isn't happening)?
这在处理一个图像和两个位置时是否可行，还是我必须制作两个单独的图像（这没有发生）？
回答by methodofaction
You don't need two separate images, but you do need two separate elements in which to position your logo.
您不需要两个单独的图像，但确实需要两个单独的元素来放置您的徽标。
See live version here: http://jsfiddle.net/BdY79/
在此处查看实时版本：http: //jsfiddle.net/BdY79/
.logo {
width: 282px;
height: 69px;
background: #fff url(http://scferg.com/wp-content/themes/austere/images/logo.png) 0 -69px no-repeat;
overflow: hidden;
}
.logo img {
background-color: #fff;
-webkit-transition: opacity 200ms ease;
-moz-transition: opacity 200ms ease;
-o-transition: opacity 200ms ease;
}
.logo img:hover {
opacity: 0;
}
In practice, you probably want to link your logo and you can use the tag to do this, so there's no extra markup. It also degrades gracefully.
在实践中，您可能想要链接您的徽标，并且您可以使用标签来执行此操作，因此没有额外的标记。它也优雅地降级。
回答by Foxinni
This does not mention the background position animation...
这个不提背景位置动画...
.box {
display:block;
height:300px;
width:300px;
background:url('http://lorempixum.com/300/300') no-repeat;
background-position:-300px;
-webkit-transition:background-position 1s ease;
}
.box:hover{
background-position:0px;
}
Webkit only:(
仅限 Webkit:(
Via: http://jsfiddle.net/hfXSs/
通过：http: //jsfiddle.net/hfXSs/
回答by Michael Mullany
Yes it is possible, but you can't use a simple transition you'll have to use a CSS animation with 4 keyframes
是的，这是可能的，但是您不能使用简单的过渡，您必须使用具有 4 个关键帧的 CSS 动画
0% - opacity 1
49% - opacity 0
50% - move to new position, opacity 0
100% - opacity 1
回答by X-NicON
https://gordonlesti.com/css-background-transitions-with-image-sprites/
https://gordonlesti.com/css-background-transitions-with-image-sprites/
<style>
.example4 {
background: url(sprite.png) 0px 0px no-repeat;
position: relative;
width: 200px;
height: 200px;
}
.example4::after {
content: "";
background: url(sprite.png) -200px 0px no-repeat;
opacity: 0;
transition: opacity 0.5s;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.example4:hover::after {
opacity: 1;
transition: opacity 0.5s;
}
</style>
<div class="example4"></div>
