css - Sprite 图像的响应式悬停效果 - 无法使其工作

Question

我浏览了 stackoverflow 上的所有线程来寻找这方面的答案，但我终究无法让它工作。

我正在尝试使用 sprite 图像创建图像悬停效果。我需要图像响应。

我为此使用的代码是:

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>

这是 fiddle http://jsfiddle.net/nhsca4c6/

Answer 1

您可以使用@media screen 来制作响应式图像，更简单的方法是在其最大宽度媒体查询中使用所有具有固定宽度的 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;
}
}