Question

我见过一个网站，它有一个img标签，指的是正常状态下的单个图像。它显示PNG的一部分，鼠标悬停时显示相同PNG图像的不同部分。 In the example page如果您将“解决方案菜单”项目悬停，然后将鼠标悬停在任何子项目上，则会显示相同图片的不同部分。

我希望在我的wordpress网站中添加相同的效果。怎么做的？

Answer 1

它们被称为 CSS Sprites

您可以详细了解HERE

Answer 2

只需更改背景的位置

div.myImage
{
  width: 100px;
  height: 100px;
  background-image: url(/images/sprite.png);
  background-position: 0px 0px;
}

div.myImage:hover
{
  background-position: -100px -100px;
}

这是sprites的工作方式。

Answer 3

CSS Image Sprites

Fiddle Demo

<强> HTML

<div class="div"></div>

<强> CSS

.div {
    display: block;
    width: 100%;
    height: 100px;
    overflow: hidden;
    margin-bottom: 20px;
    background:url("http://www.fortinet.com/sites/all/themes/fortinet/images/solution_icons/enterprise_core.png") no-repeat;
}
.div:hover {
    background-position: 0 -100px;
}

Answer 4

好像你指的是一个图像精灵。请参阅下面的帮助/信息。

http://css-tricks.com/css-sprites/

Answer 5

有很多方法可以实现这一点，你的例子使用的是一个具有固定宽度和高度的容器，一个隐藏的溢出和里面的图像所以完整的图像在那里，但溢出不显示，在悬停事件中，他们为图像设置了上边距，使其向上移动。这种图像称为精灵，所有图标都包含在同一图像中（保存http请求）并使用其位置显示。

此外，使用边距顶部，溢出隐藏等不是推荐的方法，正确的方法是在容器中使用背景css属性，以便更容易控制图像视口位置。另一个改进是使用伪元素：before而不是img标记。

在鼠标悬停时显示PNG的不同部分

5 个答案: