32

2 つの画像があり、そのうちの 1 つは最初の画像の上に重ねられた小さなアイコンです。私のアイコンの背景は白いので、アイコンを他の画像の上に配置すると、画像の上に白い四角形が表示されるこの効果が得られます。理想的には、この白い背景を他の画像の上に表示したくありません。白い背景を透明にするためにアイコンに適用できる CSS プロパティはありますか?

4

5 に答える 5

162

現在 Chrome、Firefox、および Safari でのみサポートされていますが、実際には方法があります。背景色が白の場合、CSS プロパティを追加できます。

mix-blend-mode: multiply;

詳細については、https ://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode をご覧ください。

于 2015-12-15T19:41:28.303 に答える
2

いいえ、まだです...

ただし、可能性に非常に近づいています。実験的な css 機能である CSS フィルターに関するこの記事を確認してください。

CSS フィルター

于 2014-11-14T16:23:53.130 に答える
1

CSS で背景を削除する信頼できる方法がないため、JS で行った方法のコード スニペットを共有します。

public async removeImageBackground(image) {
  const backgroundColor = { red: 255, green: 255, blue: 255 };
  const threshold = 10;

  const imageElement = new Image();
  imageElement.src = image;
  await new Promise(function(resolve) { imageElement.addEventListener('load', resolve); });

  var canvas = document.createElement('canvas');
  canvas.width = imageElement.naturalWidth;
  canvas.height = imageElement.naturalHeight;

  var ctx = canvas.getContext('2d');
  ctx.drawImage(imageElement, 0, 0);
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  for (var i = 0; i < imageData.data.length; i += 4) {
    const red = imageData.data[i];
    const green = imageData.data[i + 1];
    const blue = imageData.data[i + 2];
    if (Math.abs(red - backgroundColor.red) < threshold &&
      Math.abs(green - backgroundColor.green) < threshold &&
      Math.abs(blue - backgroundColor.blue) < threshold) {
      imageData.data[i + 3] = 0;
    }
  }

  ctx.putImageData(imageData, 0, 0);
  return canvas.toDataURL(`image/png`);
}
于 2021-05-10T19:06:27.387 に答える
1

イメージのコンテナーを作成できます。次に、コンテナーの css について:

overflow:hidden; height: (depends on your image, then make it a smaller px); width:100%;

それが役に立てば幸い。:)

于 2017-06-15T02:43:44.570 に答える