如何用8位alpha制作混合JPG / PNG

Question

我想在网站上放一个大的(几乎全屏)alpha透明图像，但我有以下问题:

• 如果我使用JPG，大小和压缩是OK的，但我不能使它透明(100 kB)

• 如果我使用PNG-24，大小是巨大的(3-4 MB)

• 如果我使用PNG-24和http://www.8bitalpha.com/将其转换为PNG-8，则尺寸较小，但我无法以256色再现原始图形。大小仍然相当大(700kb)

我想的是，如果我为透明区域创建PNG-8文件，为非透明区域创建JPG图像会怎么样?并使用绝对定位将物体移动到合适的位置。有人做过这样的事吗?

或者另一个想法，但这是我真的没有经验的东西:是否有可能使用JPG图像并将其与8位PNG的alpha透明度相结合?我的意思是使用JS或CSS3或Canvas或我以前从未使用过的东西?

这是我现在使用PNG-8的页面，但是它相当大(700 kb)并且有些颜色丢失了。

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

Answer 1

我以前使用过相同的JPG + PNG技巧来处理大型透明背景图像。把你的大图切成两种矩形:

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;
}