如何使混合JPG/PNG 8位alpha

我想提出一个大的（几乎全屏幕）阿尔法透明图像的网站上，但我有以下问题：如何使混合JPG/PNG 8位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/

来源

2011-09-21 zsero

我不明白你怎么只是非透明区域创建JPEG和使用PNG“只是透明区域'。你的意思是作为一个面具吗？ – DMan

浏览器很少有一致的像素完美结果。 – Blender

我大的，透明的背景图像之前使用的相同JPG + PNG伎俩。把你的大图片和削减它分成2种类型的长方形片：

那些不需要透明度（保存为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; 
}

来源

2011-09-22 00:11:19 Pat

如何使混合JPG/PNG 8位alpha

回答

相关问题