首页 > 网站 > 网页设计 > 正文

宽高自适应的九宫格背景图片切割分析

2024-08-30 08:33:34

字体：大中小

来源：转载

供稿：网友

在原来的宽高自适应的九宫格基础上做了一些优化，把八个背景图请求改为一个，以降低网络成本。其实这也只是一些简单的小技巧，在切图方面会比较严紧有1px的不对称就会出问题，请留意下面例子的切割分析。
RAR：module.zip
制作说明：
图片切割分析

重点在于使用局部透明的背景图，以及为每个自适应延伸的XHTML部分多添加一个<SPAN>标签读取背景，以错位的形式补上左右或上下的延伸背景。为解决IE未能高度100％问题，左右延伸高度写了3000px绝对值单位（根据需求调整）。
缺点：
背景图片必需透明所以不能使用JPG格式图片。（但愿有强人能解决这问题）

上一篇：网页配色举例分析:绿色配色网页分析

下一篇：网页设计教程(1):步骤和整体布局

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

最牛同桌！我考了696分我同桌考了703分

2024-06-26 22:28:41

650分！高二女生考入北大：遗憾不能上高三

2024-06-26 22:26:16

男生估分600只考了397 妈妈：高考虽重要，但不代表所有

2024-06-26 22:23:01

唐尚珺回应是否会直播带货：有人出100万想和他合作！

2024-06-25 19:29:23

名校抢人名场面：清华、北大太拼了！

2024-06-25 19:22:14

男生高考语文满分！网友：第一次听说

2024-06-25 19:19:15

疑难解答

图片精选

网友关注