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

Question

想知道http://sociali.st的这些家伙如何在他们的CSS中将他们的黑色图标变成灰色（“以爱为特色”部分）。新的，无法弄清楚。

他们的某些属性是否允许我将黑色图标更改为灰色图标？

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+ */
}

---

如果您想使用不透明度，请参阅code以获得跨浏览器兼容性：

 /* 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;

Answer 2

他们使用精灵作为黑色图像，不透明度为.4。在：悬停时，他们删除不透明度限制。这就是精灵在不透明度1中的样子：

使用firebug并检查元素。

Answer 3

他们使用:hover样式将其变为灰色：

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

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

使用Chrome开发者工具，您可以检查该元素，然后像这样模拟悬停状态：

告诉你他们是如何实现这种效果的。

现在，如果取消选中悬停状态，您可以看到它通过此样式回落为黑色：

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