Как происходит переход от черно-белого к цвету? - PullRequest
Новая
       12

Как происходит переход от черно-белого к цвету?

2 голосов
/ 10 октября 2010

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

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

Ответы [ 2 ]

5 голосов
/ 10 октября 2010

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

background: -webkit-gradient(linear, 0% 0%, 0% 100%, 
     from(transparent), color-stop(0.7, transparent), 
     to(rgba(0, 22, 9, 0.496094)));
0 голосов
/ 11 октября 2010

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