3

2 つの PNG 画像をブレンドして、両方にアルファの境界線がある場合に完全に一致させる方法はありますか?

これは私が抱えている問題の例です:

img {
  position: absolute;
  left: 0px;
  top: 0px;
}

.container {
  height: 512px;
  width: 512px;
}
<div class="container">
  <img src="https://image.prntscr.com/image/VmxphMVDQSu-OXXnHQm1Tg.png" alt="Sphere">
  <img src="https://image.prntscr.com/image/n0cbaO-4QVOk_PQ8ESQRqQ.png" alt="Cube">
</div>

またはCodePenへのリンク

PNG として保存されている 2 つの 3D レンダリングがあり、両方とも 50% の透明度のアルファ境界線を持っているため、Photoshop や After Effects でそれらをマージすると完全に一致します。

しかし、HTML/CSS で同じ状況を作成すると、要素間に白い線ができました。mix-blending-modeとbackground-blending- modeについて読んで、それらを使っていくつかのテストを行った後、それは役に立たないようです。両方の画像 (アルファ チャネル) が背景と事前に乗算されているため、それらの間に半透明の線 (境界線がある場所) が表示されると考えられます。

CSS、あるいは JavaScript/jQuery でこれを達成する方法はありますか?

編集: そのため、画像の移動や CSS のトリックについてこれ以上コメントすることはありません。その 1px を削除したり非表示にしたりすることはできません。全体像が同じように見えないからです。

4

4 に答える 4

0

残念ながら、実際に要素を移動したり、実際の画像を変更したりせずに、そのギャップを取り除く方法はありません。ただし、各画像にドロップ シャドウを適用して非表示にすることで偽装できます。シミを消すために化粧をするようなものです。ただし、これは画像のエッジにわずかなぼかしを追加するため、完全な解決策ではありません.

img {
    position: absolute;
    left: 0px;
    top: 0px;
    filter: drop-shadow(0 0 1px #000);
}

.container {
    height: 512px;
    width: 512px;
}
<div class="container">
    <img src="https://image.prntscr.com/image/VmxphMVDQSu-OXXnHQm1Tg.png" alt="Sphere">
    <img src="https://image.prntscr.com/image/n0cbaO-4QVOk_PQ8ESQRqQ.png" alt="Cube">
</div>

于 2017-09-15T13:15:16.117 に答える