Градиентная прозрачность картинки

[YAHOO]

Как сделать градиентную прозрачность картинки с сердечками http://jsfiddle.net/ntxsx1ba/ чтобы слева она была прозрачная, а справа непрозрачная? Т.е. чтобы картинка с сердечками слева сливалась с фоном (с использованием прозрачности), а справа она была не прозрачной.

Edited October 9, 2014 by YAHOO

[npofopr]

Воспользоваться Фотошопом и сохранить в .png)

[YAHOO]

Воспользоваться Фотошопом и сохранить в .png)

Просто выше указан пример, а я сделаю это на много картинок, которые весят jpg 200 кб, а в png весят в 2-3 раза больше, а хотелось бы чтобы сайт грузился быстро. Не уж то нельзя сделать это на css или html? Если что заплачу 50 руб за помощь)

[klierik]

может быть подойдут CSS-маски

[YAHOO]

может быть подойдут CSS-маски

спасибо, маски подошли, но дизайн уехал, но это уже другой вопрос)

 

Такой код нормальный?

<svg><defs><mask id="maskingleft" maskContentUnits="objectBoundingBox">	<rect y="0" width="1" height="1" fill="url(#bgleftgradient)">	</rect></mask><linearGradient id="bgleftgradient">	<stop stop-color="#000" offset="0%"></stop><stop stop-color="#fff" offset="100%"></stop></linearGradient></defs></svg><svg width="129" height="3941" mask="url(#maskingleft)"><image xlink:href="/images/bgleft.jpg" width="129" height="3941"></image></svg>

Edited October 10, 2014 by YAHOO

[klierik]

Такой код нормальный?

 

если данный код выполняет поставленную задачу -- то решение отличное