使用一个背景图像位置来切换图像

所以我有一个背景图像的列表项。当用户将鼠标悬停在列表项上时，我想要更改背景项。我正在使用：使用一个背景图像位置来切换图像

li  { width: 400px; height: 80px; 
      background-repeat: no-repeat; background-position: 10px 10px; 
      background-image: url('myimg.png'); } 
li:hover { background-image: url('myimg-hover.png'); }

不幸的是，当您第一次查看页面并将鼠标悬停在某个项目上时，会导致一些闪烁。

我宁愿将图像合并到一个图像中，只是在将鼠标悬停在列表项上时更改背景图像的位置。

组合成一个的图像宽25px，高50px，图像显示只有25px x 25px。

我尝试这样做：

li  { background: url('mynewimg.png') 0 0; } 
li:hover { background: url('mynewimg.png') 0 -25px; }

但是，这只是显示整幅图像，因为我的列表项是如此之大，并且不定位是正确的。

任何人都知道我该怎么做？

来源

2013-10-03 Steven

怎么样的jsfiddle玩，所以我们可以看到标记和脚本？ – DevlshOne

我能做些什么，如：

<li class="icon"><i></i></li> 

.icon { 
    width:25px; 
    height:50px; 
    display:table-cell; 
vertical-alignment:middle; 
} 
.icon>i 
{ 
    background:url(); 
    background-position:<value>px,<value>px 
} 
.icon:hover>i{ 
background-position: <value>px,<value>px 
}

希望这个解决方案可以解决你的问题。

来源

2013-10-03 05:25:42

没有jsFiddle我不能想象这个例子，但我想你是在谈论图像精灵。请查看http://css-tricks.com/css-sprites/了解更多关于它们的信息。

来源

2013-10-03 02:37:23

他使用sprite的想法作为第二选项，他需要做jsfiddle，所以我们可以给他一个更好的解决方案。 –

你的CSS应该是：

li { 
    width: 400px; height: 80px; 
    background-repeat: no-repeat; 
    background-size: 50px 50px; 
    background-position: 10px 10px; 
    background-image: url('mynewim.png'); 
    background-origin: 0px 0px; 
} 
li:hover { 
    background-origin: 50px 0px; 
}

你必须设置大小明确地，然后用产地

来源

2013-10-03 17:06:48 vals

使用一个背景图像位置来切换图像

回答

相关问题