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

【问题标题】：How to make hybrid JPG / PNG with 8-bit alpha如何使用 8 位 alpha 制作混合 JPG / PNG
【发布时间】：2011-09-21 22:58:11
【问题描述】：

我想在网站上放一张大（几乎全屏）的 alpha 透明图像，但我遇到了以下问题：

如果我使用 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 的 alpha 透明度相结合？我的意思是使用 JS 或 CSS3 或 Canvas 或我以前从未使用过的东西？

这是我现在使用 PNG-8 的页面，但它非常大（700 kb）并且有些颜色丢失了。

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

【问题讨论】：

我不明白您如何仅为非透明区域创建 JPEG 并使用“仅用于透明区域”的 PNG。你是说作为面具吗？
浏览器很少有一致的像素完美结果。

标签： html css png alpha-transparency

【解决方案1】：

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

那些不需要透明度的（另存为JPG）
确实需要透明度的那些（另存为 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;
}

【讨论】：