Увязать изображение с прозрачным, как градиент

Я хотел бы, чтобы изображение (фоновое изображение) исчезало до прозрачного, так что контент за ним можно было увидеть (едва, благодаря прозрачности).

Я могу добиться этого, очевидно, с помощью PNG-изображения, но мне нужно попросить моего графического дизайнера менять изображение каждый раз, когда я хочу изменить начальную точку = > остановить точки прозрачности (возможно, я хочу больше цвета или, может быть, хочу меньше цвета и большей прозрачности).

Есть ли шанс, что я смогу добиться такого же эффекта с помощью CSS3? Я попытался применить градиент к прозрачности на jpg (и png), но я не могу его увидеть, если у PNG уже нет прозрачности (и в основном градиента) уже сделано (что делает градиент css бесполезным).

Любое предложение? Я много разбираюсь в сети, но похоже, что я не использую правильное ключевое слово или, возможно, это невозможно.

Обновление 1:

Код говорит больше, чем много слов, я хотел бы сделать что-то вроде этого (но синтаксис, очевидно, неверный):

background: linear-gradient(to bottom, rgba(url('splash_bottom3.png'), 0.0), rgba(url('splash_bottom3.png'), 1.0));

Ответ 1

Завершите переписывание моего предыдущего ответа, потому что я, казалось бы, полностью не понял этот вопрос.

Если вы хотите:

Вы можете сделать это:

<html>
  <style type='text/css'>
    div, img { position:absolute; top:0; left:0; width:250px; height:250px; }
    img {
      -webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))
    }
  </style>
  <body>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet porttitor massa. Morbi eget tortor congue, aliquet odio a, viverra metus. Ut cursus enim eu felis sollicitudin, vitae eleifend urna lobortis. Mauris elementum erat non facilisis cursus. Fusce sit amet lacus dictum, porta libero sed, euismod tellus. Aenean erat augue, sodales sed gravida ac, imperdiet ac augue. Ut condimentum dictum mauris. Donec tincidunt enim a massa molestie, vel volutpat massa dictum. Donec semper odio vitae adipiscing lacinia.</div>
    <img src='http://verysmartbrothas.com/images/random.jpg?9fe95b' />
  </body>
</html>

Ответ 2

Если вы хотите просто пометить цвет фона (в данном случае белый), см. рабочий пример здесь:

http://jsfiddle.net/yw9v7zm5/

.css для контейнера изображений div использует:

background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 80%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(80%,rgba(255,255,255,1)));
background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );