css - 白黒からカラーへの変換はどのように行われますか

Question

私は、ホバーしたときに、このサイトで写真が白黒ではなく本当の色をどのように表示するかを調べようとしています: http://2010.dconstruct.org/ . 画像の 2 つのバージョンがあるという単純な問題ではないと思いますが、よくわかりません。

私はそれを助けていただければ幸いです！

Answer 1

このオプションを使用して遷移を実現します。

background: -webkit-gradient(linear, 0% 0%, 0% 100%, 
     from(transparent), color-stop(0.7, transparent), 
     to(rgba(0, 22, 9, 0.496094)));

Answer 2

実際には、コードを見なくても、画像の 2 つのバージョンを使用していますが、bw/color バージョン間のコントラストの違いからわかります。とにかく、各アンカーには同じ背景画像が割り当てられており、url("../../i/speakers/sprite.jpg")その異なる垂直位置によってどのポートレートが表示されるかが決まります。このスプライト画像は白黒です。

各アンカーには、不透明度が最初に 0 に設定され、マウスオーバーで 100% に設定された画像要素 (色付きバージョン) が含まれます。

<a class="tile bridle" href="/speakers/james-bridle">
 <p>
  <span>
   James
   <b>Bridle</b>
  </span>
 </p>
 <img alt="" src="http://media02.dconstruct.org/2010-0008/i/speakers/bridle.jpg?0008"/>
</a>