0

我想在网站上放一个大(几乎全屏)的 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/

4

1 回答 1

1

我之前使用过相同的 JPG + PNG 技巧来处理大型透明背景图像。拍摄您的大图像并将其切成两种类型的矩形块:

  1. 不需要透明的(另存为JPG)
  2. 那些确实需要透明度的(另存为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-22T00:11:19.557 回答