Question

我正在使用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文件的格式不同？谢谢！

Answer 1

图像称为精灵图像：由多个精灵组成的单个图像文件，您将其应用为单个背景图像，并根据width和height属性设置的约束进行定位在一个元素上。它只是一个普通的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;
}

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

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

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

Answer 2

目前无法使用css更改图像中的颜色，并且可能永远不会或很远。有可能进行颜色叠加，但除非您处理的图像是块颜色，否则这无济于事。

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

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

http://css-tricks.com/css-sprites/（关于精灵的好指南）

http://spriteme.org/（非常方便，会为你做的工作 - 推荐）

Answer 3

实验性CSS filters即将出现，但如果没有良好的跨浏览器支持，那么你在这方面基本上没有运气。如果您可以处理减少的浏览器支持，请查看this overview of CSS filters.

您当前的代码只显示了rss.png的一半，它很方便地只是其中一个子图像的精确高度。当您声明background:时，您告诉它从顶部粘贴图像并隐藏下半部分。

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

总的来说，没有任何神奇的事情发生，只是我们每天都分享和使用的有充分记录的魔法。

可以使用CSS来更改活动和图像的图像颜色。徘徊？

3 个答案: