CSS可用于更改图像'；s颜色适用于主动式&；悬停

我正在使用Shape5.com公司响应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文件的格式不同？谢谢

该图像称为精灵图像：由多个精灵组成的单个图像文件，应用为单个背景图像，并根据元素上的

宽度

和

高度

属性设置的约束进行定位。它只是一个普通的PNG图像，与其他PNG图像没有本质上的区别

至于将图像的颜色实际更改为红色，这不是仅凭CSS就能做到的，这取决于“更改颜色”的含义——最安全的方法是修改图像以添加具有所需颜色的新精灵。因为它只是一个普通的PNG图像，所以只需将画布向下扩展23个像素，在创建的额外空间中渲染新的精灵，并修改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;
}

您还可以在

：hover

和

：active

规则中将

背景：url（../images/rss.png）no repeat

部分替换为

背景位置：

，因为您实际上只是在CSS中使用精灵时修改背景位置：

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

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

---

目前，使用css无法改变图像中的颜色，而且可能永远也不会改变，或者还有很长的路要走。有可能做一个颜色叠加，但这不会有帮助，除非你处理的图像是块颜色

为了更改颜色，您需要在该元素的悬停样式规则上引用一个单独的图像

另一种方法是使用一个sprite，其中所有图像都作为一个图像加载，css只关注其中的一部分，这取决于状态，即悬停、活动等。这就是您前面提到的。请查看以下链接以获取有关使用精灵的信息，但简单地说，如果您有一个40*40px的社交图标。您可以创建一个40*80的图像，然后在css中使用上半部分表示正常，下半部分表示悬停。这实际上节省了加载页面时的时间，并且您应该尽可能尝试使用精灵，记住页面越快对用户越好

（关于精灵的好指南）

---

（非常方便，可以为您完成这项工作-推荐）

实验性的

CSS过滤器已经面世，但是如果没有良好的跨浏览器支持，您在这方面基本上就不走运了。如果您可以处理浏览器支持减少的问题，请查看

您当前的代码仅显示rss.png的一半，而rss.png恰好是其中一个子图像的精确高度。当您声明
背景：
时，您告诉它从顶部粘贴图像并隐藏下半部分

悬停时，您指示它只绘制图像的下半部分（悬停状态部分）。要使其成为不同的颜色，您几乎需要编辑文件（除了使背景图像部分透明并通过它显示红色背景）

总的来说，并没有什么神奇的事情发生，只是我们每天都分享和使用的有据可查的魔法