Question

所以我有一个带有背景图片的列表项。当用户将鼠标悬停在列表项上时，我希望更改背景项。我正在使用这个：

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'); }

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

我宁愿将图像组合成一个图像，只需将鼠标悬停在列表项上时更改背景图像位置。

图像合二为一，宽25像素，高50像素，图像仅为25像素x 25像素。

我试过了：

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

但是这只是显示整个图像，因为我的列表项很大，并且没有正确定位。

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

Answer 1

我能做些什么：

<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
}

希望此解决方案能解决您的问题。

Answer 2

你的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; 
}

您必须明确设置大小，然后使用原点

Answer 3

没有jsFiddle我无法想象这个例子，但我认为你在谈论图像精灵。查看http://css-tricks.com/css-sprites/以获取有关它们的更多信息。

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

3 个答案: