Как достигается черно -белое раскрашивать сворачивание

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

  •  29-09-2019
  •  | 
  •  

Вопрос

Я пытаюсь выяснить, как, когда на этом сайте парят, фотографии показывают свои истинные цвета вместо того, чтобы быть черно -белыми: http://2010.dconstruct.org/ Анкет Я не думаю, что это просто иметь две версии изображения, но я действительно не уверен.

Я бы признателен за любую помощь с этим!

Это было полезно?

Решение

На самом деле, он использует две версии изображения, даже не глядя на код, вы можете сказать по разницу, напротив, некоторые из них имеют между версиями 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>

Другие советы

Он использует эту опцию для достижения перехода:

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