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

想知道这些家伙在 http://sociali.st如何在他们的CSS中将他们的黑色图标变成灰色(“以爱为特色”部分).新的,无法弄明白.

他们的一些财产是否允许我将黑色图标更改为灰色图标？

你可以这样做：

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;