0

I found this css code which show the images in grayscale color and then in full color when hover the image. I need the same but with the sepia color instead of grayscale

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

 img:hover {
  filter: none;
  -webkit-filter: grayscale(0%);
}

Update: tried with this code but it doesn't work in Firefox. The sepia image is not shown at all:

img.sepia{ -webkit-filter: sepia(1);
-webkit-filter: sepia(100%); -moz-filter: sepia(100%);
-ms-filter: sepia(100%); -o-filter: sepia(100%);
filter: url(sepia.svg#old-timey);
filter: sepia(100%);
background-color: #5E2612;
filter: alpha(opacity = 50);
zoom:1;
}
4

3 回答 3

5

使用 webkit 和过滤器，这很容易。在这里，您可以剪切和粘贴：

img {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'old-timey\'><feColorMatrix type=\'matrix\' values=\'0.14 0.45 0.05 0 0 0.12 0.39 0.04 0 0 0.08 0.28 0.03 0 0 0 0 0 1 0\'/></filter></svg>#old-timey");
    -webkit-filter: sepia(1);
    -webkit-filter: sepia(100%);
    -moz-filter: sepia(100%);
    -ms-filter: sepia(100%);
    -o-filter: sepia(100%);
    filter: sepia(100%);
}
img:hover {
    filter: none;
    -webkit-filter: sepia(0);
    -moz-filter: sepia(0);
    -ms-filter: sepia(0);
    -o-filter: sepia(0);
    filter: sepia(0);
}
于 2013-03-28T07:33:49.913 回答
1

您可以使用 Sepia CSS 过滤器。

http://html5-demos.appspot.com/static/css/filters/index.html

于 2013-03-27T15:57:43.993 回答
0

这是为了让它在 FF 中更像在 chrome 中

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'old-timey\'><feColorMatrix type=\'matrix\' values=\'0.64 0.55 0.15 0 0 0.52 0.49 0.14 0 0 0.18 0.38 0.13 0 0 0 0 0 1 0\'/></filter></svg>#old-timey");
于 2013-09-27T11:17:52.407 回答