Как достигается черно -белое раскрашивать сворачивание
-
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)));