在CSS中将黑色图标变为灰色？

Question

想知道 http://sociali.st 网站中的黑色图标是如何在 CSS 中变成灰色的 ("featured with love by" 部分)。我刚接触这个，还不知道怎么弄。

有没有什么属性可以让我把黑色图标变成灰色的？

- Peekay

---

你检查过了吗？这个网站正在使用 opacity: 0.4。 - Bhojendra Rauniyar

当然试过了，但还是搞不明白。我对这个还很新。 - Peekay

Answer 1

您可以像这样为自己做：

您可以按照以下步骤进行操作：

div{
  background: url(path.jpg) no-repeat;
}
div:hover{
  opacity: .4;
}

顺便提一句，对于黑色图片来说这是一个很好的处理方式。

但是如果你想要将彩色图片变成灰色，可以使用以下方法：

div:hover{
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}

---

如果你想使用不透明度，则可以查看此代码以实现跨浏览器兼容性：

 /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* Netscape */
  -moz-opacity: 0.5;

  /* Safari 1.x */
  -khtml-opacity: 0.5;

  /* Good browsers */
  opacity: 0.5;

- Bhojendra Rauniyar

Answer 2

他们在使用透明度为0.4的精灵图作为黑色图像。当鼠标悬停时，他们会移除透明度限制。以下是透明度为1时精灵图的样子： 通过使用Firebug并检查元素来找出这个问题。

- aas4mis

---

我认为你的答案不正确。我同意MrChief的观点。 - Robert Harvey

看起来对我来说像是一个精灵... http://sociali.st/wp-content/themes/socialist/library/css/../images/views/home/home-trust-logos.png?cache=251127031 只是在展示原始图像实际上是黑色。不透明度正在发挥作用。 - aas4mis

那个精灵并不包含苹果标志或按钮。此外，请在Firebug或Chrome开发工具中检查。没有涉及到精灵！ - Mrchief

“Featured with love by” 部分的苹果标志在哪里？我列出的图片展示了原帖所请求的部分中所有“黑色”图标的精灵。 - aas4mis

我会给予应有的赞扬！+1！今天这是我忽略的第二个问题。也许我今天应该休息一下... :) - Mrchief

Answer 3

他们正在使用:悬停样式将其变成灰色：

.button.button-app-store:hover {
   background: #262626;
   ...

悬停伪类对于突出显示可操作元素非常有用，但也可以用于创建一些不错的技巧 - 例如级联下拉菜单。它通常用于链接和按钮以创建此效果。

使用Chrome开发者工具，您可以检查该元素，然后模拟悬停状态，如下所示：

这段文字讲述了如何实现这种效果。如果取消鼠标悬停状态，你会发现通过以下样式回退到黑色：

.button.button-app-store {
   background: #171717;
   ...

- Mrchief

---

嗯...我的Firefox右侧显示了不同的选项卡集合...规则、计算、字体、框模型。 - Robert Harvey

我正在使用Chrome Dev工具，而不是Firebug。或者你是在说在Firefox中显示了一个不同的网站？ - Mrchief

好的，明白了。我仍然觉得Chrome Dev和Firebug有点令人困惑，需要更多地学习它们。 - Robert Harvey

谢谢回复，但我说的是页面下面的图标。那个规则还适用吗？ - Peekay

其实，对于其他图标，他们正在使用精灵并更改透明度，正如@aas4mis所指出的那样。 - Mrchief