css - CSS 可以用于更改图像的颜色以使其处于事件状态和悬停状态吗？

Question

我正在使用 Shape5.com Corporate Response Joomla 模板，并被要求更改右上角四个社交媒体图标的颜色。这个模板的演示可以在这里找到:

http://www.shape5.com/demo/corporate_response/

他们的每个图标的 CSS 从 template.css 文件中看起来是这样的。我只是包括第一个图标来保持这个简短，它是用于 RSS 的:

#s5_rss {
height:23px;
width:22px;
background:url(../images/rss.png) no-repeat top left;
cursor:pointer;
margin-left:8px;
float:right;
}

#s5_rss:hover {
background:url(../images/rss.png) no-repeat bottom left;
}

rss.png 在这里:

http://www.shape5.com/demo/corporate_response/templates/corporate_response/images/rss.png

有人要求我使用 CSS 将事件/悬停颜色从现在的颜色更改为红色。我不确定这是否可以用 CSS 完成。它可以？或者这是否需要设计师使用图像创建的新 .png 文件是所需的红色？

我还想了解为什么这个 rss.png 文件中有两个不同阴影的图标图像，以及 CSS 如何在它们之间切换以知道将哪个用于悬停？这是一个允许这样做的特殊 .png 文件吗，也许格式与大多数 .png 文件不同？谢谢!

Answer 1

图像被称为 sprite 图像:由多个 sprite 组成的单个图像文件，您将其用作单个背景图像，并根据 width 和 设置的约束进行定位height 元素的属性。它只是一个普通的 PNG 图像，与其他 PNG 图像没有本质区别。

至于将图像的颜色实际更改为红色，这不是您可以单独使用 CSS 来完成的，具体取决于您所说的“更改颜色”的含义 — 最安全的做法是修改图像以添加新的 sprite具有所需的颜色。由于它只是一个普通的 PNG 图像，只需将 Canvas 再向下扩展 23 像素，在创建的额外空间中渲染新的 Sprite ，然后修改您的 CSS，使其看起来像这样:

#s5_rss:hover {
background:url(../images/rss.png) no-repeat center left;
}

#s5_rss:active {
background:url(../images/rss.png) no-repeat bottom left;
}

您还可以在 中用 background-position: 替换 background:url(../images/rss.png) no-repeat 部分: hover 和 :active 规则，因为您实际上只是在 CSS 中使用 Sprite 时修改背景位置:

#s5_rss:hover {
background-position:center left;
}

#s5_rss:active {
background-position:bottom left;
}