我之前使用过相同的 JPG + PNG 技巧来处理大型透明背景图像。拍摄您的大图像并将其切成两种类型的矩形块:
- 不需要透明的(另存为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;
}