0

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

.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？

4

4 回答 4

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

.facebook_ico:hover {
  background-position: bottom right;
}
于 2013-10-23T20:24:38.050 回答
1

尝试这个

.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
}
于 2013-10-23T20:24:14.250 回答
1

使用background-position：

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

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

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

于 2013-10-23T20:25:11.363 回答
1

就像说你可以使用

.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;
}
于 2013-10-23T20:25:35.793 回答