0

Web サイトに大きな (ほぼフルスクリーンの) アルファ透過画像を配置したいのですが、次の問題があります。

  • JPG を使用する場合、サイズと圧縮は問題ありませんが、透明にすることはできません (100 kB)

  • PNG-24 を使用すると、サイズが非常に大きくなります (3 ～ 4 MB)。

  • PNG-24 とhttp://www.8bitalpha.com/を使用して PNG-8 に変換すると、サイズは小さくなりますが、元のグラフィックを 256 色で再現できません。サイズはまだかなり大きい (700 kB)

私が考えていたのは、透過領域だけに PNG-8 ファイルを作成し、非透過領域に JPG 画像を作成するとどうなるかということです。また、絶対配置を使用して物を所定の位置に移動します。誰かがこのようなことをしましたか？

または他のアイデアですが、それは私が実際に経験したことのないものです.JPG画像を使用して、8ビットPNGのアルファ透明度と組み合わせることができますか? JS、CSS3、Canvas、またはこれまでに使用したことのないものを使用することを意味しますか?

これは私が現在 PNG-8 を使用しているページですが、かなり大きく (700 kb)、一部の色が失われています。

http://ilhaamproject.com/sand-texture-2/

4

1 に答える 1

1

以前、大きな透明な背景画像で同じ JPG + PNG トリックを使用したことがあります。大きな画像を 2 種類の長方形に切り分けます。

  1. 透過が不要なもの（JPGで保存）
  2. 透過性が必要なもの (PNG として保存)

目標は、できるだけ多くの画像の詳細を JPG として保存することです。

次に、相対位置と絶対位置を使用して、すべてを元に戻す必要があります。

<div class="bg">
    <div class="content">
        http://slipsum.com
    </div>

    <div class="section top"></div>
    <div class="section middle"></div>
    <div class="section bottom"></div>
</div>

.bg {
    width: 600px; /* width of your unsliced image */
    min-height: 800px; /* height of your unsliced image, min-height allows content to expand */
    position: relative; /* creates coordinate system */
}

/* Your site's content - make it appear above the sections */
.content {
    position: relative;
    z-index: 2;
}

/* Define the sections and their background images */
.section {
    position: absolute;
    z-index: 1;
}

.section.top {
    width: 600px;
    height: 200px;
    top: 0;
    left: 0;
    background: url(top.png) no-repeat 0 0;
}

.section.middle {
    width: 600px;
    height: 400px;
    top: 200px;
    left: 0;
    background: url(middle.jpg) no-repeat 0 0;
}

.section.bottom {
    width: 600px;
    height: 200px;
    top: 600px;
    left: 0;
    background: url(bottom.png) no-repeat 0 0;
}
于 2011-09-22T00:11:19.557 に答える