0

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

4

3 回答 3

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部分，因为在 CSS 中使用精灵时您实际上只是在修改背景位置：background-position::hover:active

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

#s5_rss:active {
background-position:bottom left;
}
于 2013-10-07T09:54:05.713 回答
0

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

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

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

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

http://spriteme.org/（非常方便，会为您完成工作 - 推荐）

于 2013-10-07T09:58:44.827 回答
0

实验CSS filters性即将出现，但如果没有良好的跨浏览器支持，您在这方面基本上不走运。如果您可以处理减少的浏览器支持，请查看此 CSS 过滤器概述。

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

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

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

于 2013-10-07T09:59:18.197 回答