我想在网站上放一个大的(几乎全屏)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)并且丢失了一些颜色。
答案 0 :(得分:1)
我之前使用过相同的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;
}