0

画像をグレースケールカラーで表示し、画像にカーソルを合わせるとフルカラーで表示するこのcssコードを見つけました。同じことが必要ですが、グレースケールではなくセピア色が必要です

 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%);
}

更新: このコードで試してみましたが、Firefox では機能しません。セピア画像はまったく表示されません。

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 に答える