[英]How to make hybrid JPG / PNG with 8-bit alpha
I would like to put a big (almost full screen) alpha transparent image on a website, but I have the following problem: 我想在网站上放置一个大(几乎全屏)的alpha透明图像,但是我遇到以下问题:
if I use JPG the size and compression is OK, but I cannot make it transparent (100 kB) 如果使用JPG,则大小和压缩都可以,但不能使其透明(100 kB)
if I use PNG-24 the size is HUGE (3-4 MB) 如果我使用PNG-24,则大小为巨大(3-4 MB)
if I use PNG-24 and http://www.8bitalpha.com/ to convert it to PNG-8 then the size is smaller but I cannot reproduce the original graphics in 256 colors. 如果我使用PNG-24和http://www.8bitalpha.com/将其转换为PNG-8,则尺寸较小,但无法以256色再现原始图形。 The size is still quite big (700 kB)
大小仍然很大(700 kB)
What I was thinking about is what if I create PNG-8 files just for the transparent regions and a JPG image for the non-transparent regions. 我在想的是如果我仅为透明区域创建PNG-8文件,为非透明区域创建JPG图像,该怎么办。 And use absolute positioning to move things into place.
并使用绝对定位将事物移动到位。 Has anyone done anything like this?
有人做过这样的事情吗?
Or an other idea, but that's something I really don't have experience with: is it possible to use a JPG image and combine it with alpha transparency from an 8-bit PNG ? 或其他想法,但这是我真正没有的经验: 是否可以使用JPG图像,并将其与8位PNG的alpha透明度相结合 ? I mean using JS or CSS3 or Canvas or something what I have never used before?
我的意思是使用JS或CSS3或Canvas或以前从未使用过的东西?
Here is the page where I'm using PNG-8 now, but it's quite big (700 kb) and some colors are lost. 这是我现在正在使用PNG-8的页面,但是它很大(700 kb),有些颜色丢失了。
http://ilhaamproject.com/sand-texture-2/ http://ilhaamproject.com/sand-texture-2/
I've used the same JPG + PNG trick before with large, transparent background images. 之前,我在大型透明背景图片上使用了相同的JPG + PNG技巧。 Take your large image and cut it up into 2 types of rectangular pieces:
放大图像并将其切成2种矩形块:
The goal is to get as much image detail as possible saved as JPG. 目的是获得尽可能多的图像细节,另存为JPG。
Next you'll need to piece everything back together using relative and absolute positioning: 接下来,您需要使用相对和绝对定位将所有内容重新组合在一起:
<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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.