css - 黑白到彩色的转换是如何实现的

Question

我试图找出当鼠标悬停在上面时，这些照片如何在这个网站上显示它们的真实颜色而不是黑白：http: //2010.dconstruct.org/。我认为拥有两个版本的图像并不是一件简单的事情，但我真的不确定。

我将不胜感激任何帮助！

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

实际上，它确实使用了图像的两个版本，即使不查看代码，您也可以通过其中一些版本之间的对比度差异来判断黑白/彩色版本。无论如何，每个锚点都分配了相同的背景图像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>