div+css实现九宫格效果 有3种方法:
1、方法一:把九宫图切割成9张图,用9个div合在一起,改变宽高,实现。优点:兼容性100%支持,缺点div太多,使用不方便。
2、方法二:把九宫图按特定格式排列成一张图,再用9个div合在一起,改变宽高和padding,实现。优点:兼容性100%支持,缺点div太多,使用不方便。
一张背景实现自适应九宫格/*为了让看得简单清晰点,CSS跟XHTML代码就不写那么复杂了*/
div,span{display:block;background-image:url(./UploadFiles/20081210213558176.gif);}/*我懒所以直接div,span算了*/
.mdl{overflow:hidden;position:relative;width:70%;padding:52px 28px 28px;background:#657B93;}
.mdl div{position:absolute;z-index:2;}
h3{position:absolute;top:20px;z-index:3;margin:0;}
.mdl_t_l{top:0;left:0;width:28px;height:52px;background-position:-28px -52px;}
div.mdl_t_c{top:0;z-index:1;width:100%;height:52px;background-position:-56px 0;}
.mdl_t_c span{height:52px;background-position:-112px 0;}
.mdl_t_r{top:0;right:0;width:28px;height:52px;background-position:-55px -52px;}
div.mdl_c_l{top:0;left:0;z-index:1;width:28px;background-position:0 -52px;}
.mdl_c_l span{width:28px;height:2000px;background-position:0 -132px;}
div.mdl_c_r{top:0;right:0;z-index:1;width:28px;background-position:right top;}
.mdl_c_r span{width:28px;height:2000px;background-position:right -80px;}
.mdl_b_l{bottom:0;left:0;width:28px;height:28px;background-position:-28px -104px;}
div.mdl_b_c{bottom:0;z-index:1;width:100%;height:28px;background-position:0 -133px;}
.mdl_b_c span{bottom:0;height:28px;background-position:-56px -133px;}
.mdl_b_r{bottom:0;right:0;width:28px;height:28px;background-position:-55px -104px;}
一张背景实现自 适应九宫格
在原来的宽高自适应的九宫格基础上做了一些优化,把八个背景图请求改为一个,以降低网络成本。其实这也只是一些简单的小技巧,不过在切图方面会比较严禁有1px的不对称就会出问题,请留意下面例子的切割分析。
3、方法三:使用css的border-image属性实现。优点:div只用1个,使用方便,缺点是极少数机型会出现白线的问题。
目前推荐使用这种方法:
-webkit-border-image: url('../assets/button_9slice.png') 18 repeat;
border-image: url('../assets/button_9slice.png') 18 fill repeat;