如何使混合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

回答

相關問題