使用精灵图像响应悬停效果 - 无法使其工作

Question

我经历了stackoverflow上的所有线程，寻找答案但是对于我的生活，我无法让它发挥作用。

我尝试使用精灵图片创建图像悬停效果。 我需要图像响应。

我使用的代码是：

CSS

#sprite {
    background:url(http://i.imgur.com/AJ8dt9d.jpg) 50% 0 no-repeat;
    display:block; /* Necessary, since A is not a block element */
    height:500px;
    max-width:500px;
    margin:auto;
}

#sprite:hover {
    background: url(http://i.imgur.com/AJ8dt9d.jpg) 50% 100% no-repeat;
    display:block; /* Necessary, since A is not a block element */
    height:500px;
}

HTML

<div id="sprite"><a href="link.html"></a></div>

这就是小提琴 http://jsfiddle.net/nhsca4c6/

Answer 1

您可以使用@media屏幕制作响应式图像，而击球手的方法是在其最大宽度媒体查询中使用所有具有固定宽度的div，并且在此外，您应该使用宽度百分比

对于最大宽度为1024px的屏幕

@media screen and (max-width: 1024px){
   #sprite {
    background:url(http://i.imgur.com/AJ8dt9d.jpg) 50% 0 no-repeat;
    display:block; /* Necessary, since A is not a block element */
    height:500px;
    max-width:500px;
    margin:auto;
}

#sprite:hover {
    background: url(http://i.imgur.com/AJ8dt9d.jpg) 50% 100% no-repeat;
    display:block; /* Necessary, since A is not a block element */
    height:500px;
}
}

对于最大宽度为720px的屏幕

@media screen and (max-width: 720px){
 #sprite {
    background:url(http://i.imgur.com/AJ8dt9d.jpg) 50% 0 no-repeat;
    display:block; /* Necessary, since A is not a block element */
    height:300px;
    max-width:300px;
    margin:auto;
}

#sprite:hover {
    background: url(http://i.imgur.com/AJ8dt9d.jpg) 50% 100% no-repeat;
    display:block; /* Necessary, since A is not a block element */
    height:300px;
}
}

Answer 2

请看一下 http://jsfiddle.net/nhsca4c6/2/ 为元素设定固定宽度的主要的东西。 也应该用

background-size: cover;