image - 背景画像を透明にフェードする方法は?

Question

関連する画像は次のとおりです。

私の画像の右側に描かれているようなものを達成したい. しかし、無地の色ではなく、独自の背景画像を持つ親コンテナーもあります。

何かアドバイス？

編集:追加するのを忘れました。クロスブラウザーの互換性は重要です。(または少なくとも Firefox)。

Answer 1

純粋な CSS ソリューションは 1 つしか思い浮かびませんが、それは正気ではありません。

画像の幅が100px. div幅の100px広いを作成し、100それぞれが幅が1px広く、それぞれが同じbackground(適切に配置されている) で、それぞれがopacityfrom 0(最初の子) から.99(最後の子) までを持つ子を与える必要があります。

個人的には、この方法はおかしいと思います。

Rory O'Kane は素晴らしくクリーンなソリューションを提供してくれました。また、JavaScript を使用する別のアイデアもあります。

基本的には、canvas要素 ( support ) を使用し、その上に画像を描画し、そのピクセルをループして、それぞれのアルファを調整するという考え方です。

デモ

(下にスクロールすると結果が表示されます)

関連するHTML :

<div class='parent'>
  <canvas id='c' width='575' height='431'></canvas>
</div>

関連するCSS (親に背景画像を設定)

.parent {
  background: url(parent-background.jpg);
}

JavaScript :

window.onload = function() {
  var c = document.getElementById('c'), 
      ctxt = c.getContext('2d'), 
      img = new Image();
  
  img.onload = function() {
    ctxt.drawImage(img, 0, 0);
    var imageData = ctxt.getImageData(0, 0, 575, 431);
    for(var i = 0, n = imageData.data.length; i < n; i += 4) {
      imageData.data[i + 3] = 255*((i/4)%575)/575;
    }
    ctxt.putImageData(imageData, 0, 0);
  };
  /* images drawn onto the canvas must be hosted on the same web server 
  with the same domain as the code executing it */
  /* or they can be encoded like in the demo */
  img.src = 'image-drawn-on-canvas.jpg';
};

Answer 2

考えられる CSS のみの方法を無視して、画像のアルファ チャネルに組み込まれた透明なグラデーションを使用して、画像をPNGにすることができます。IE 6 以下を除き、すべてのブラウザが PNG 透過性をサポートしています。サンプル画像は、透明なグラデーションを使用した PNG としてどのように表示されるかを次に示します (この画像を他の背景に対して配置してみてください)。

画像がユーザーから送信されたものであり、事前にグラデーションを追加できない場合は、ユーザーが画像をアップロードするときに、各画像のグラデーションを追加したバージョンを作成して保存できます。

Answer 3

これらをチェックしてください

デモ1

デモ 2

Answer 4

CSS のみの方法:

https://gist.github.com/3750808