Question

我正在使用的图像文件是由两个不同颜色（蓝色/橙色）的相同对象创建的.png file。 .png文件中的对象是彼此相邻的。我想要做的是将背景图像设置为.png（蓝色）的左侧部分并悬停到右侧部分（橙色的.png。我知道当.png中的对象在彼此之下时它是如何工作的例如：

.facebook_ico {
  background : transparent url('img/social-icons.png') bottom right no-repeat;
}

.facebook_ico:hover {
  background : transparent url('img/social-icons.png') top right no-repeat;
}

但如果对象彼此相邻，这是如何工作的？

为了避免任何误解，我正在寻找一种方法来使用背景图像，它具有多个对象彼此相邻（在本例中为2）。这是可能的还是我需要让在彼此之下才能在hover中更改它们？

Answer 1

.facebook_ico {
  background: transparent url('img/social-icons.png') bottom left no-repeat;
}

.facebook_ico:hover {
  background-position: bottom right;
}

Answer 2

试试这个

.facebook_ico {
  background : transparent url('img/social-icons.png') top left no-repeat; width:30px; height:30px
}

.facebook_ico:hover {
  background : transparent url('img/social-icons.png') top right no-repeat;width:30px; height:30px
}

Answer 3

使用background-position：

.something {
   background-position: 0px 0px;
}

.something:hover {
   background-position: 20px 0px
}

设置值以匹配图标的大小。

Answer 4

就像说你可以使用

.facebook_ico {
  background : transparent url('img/social-icons.png') top left no-repeat;
}

.facebook_ico:hover {
  background-position : top right;
}

如果它被截断，最好使用像素值来获得精确的背景

.facebook_ico {
  background : transparent url('img/social-icons.png') top 0px no-repeat;
}

.facebook_ico:hover {
  background-position : top 120px;
}

如何在悬停中更改背景图片？

4 个答案: