白黒の色合いのタンションはどのように達成されていますか

StackOverflow https://stackoverflow.com/questions/3901724

  •  29-09-2019
  •  | 
  •  

質問

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

どんな助けにも感謝します！

役に立ちましたか？

解決

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

各アンカーには、最初に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>

他のヒント

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

background: -webkit-gradient(linear, 0% 0%, 0% 100%, 
     from(transparent), color-stop(0.7, transparent), 
     to(rgba(0, 22, 9, 0.496094)));
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top