m0_51727873 2021-06-06 11:21 采纳率: 0%
浏览 31

将一张图片切割成九宫格

有没有微信小程序方面的大佬，会把一张图片分割成九宫格的形式

  • 写回答

1条回答 默认 最新

  • 易书生 2021-06-06 12:05
    关注

    1、方法一：把九宫图切割成9张图，用9个div合在一起，改变宽高，实现。优点：兼容性100%支持，缺点div太多，使用不方便。


    2、方法二：把九宫图按特定格式排列成一张图，再用9个div合在一起，改变宽高和padding，实现。优点：兼容性100%支持，缺点div太多，使用不方便。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一张背景实现自适应九宫格</title>
<style type="text/css">
/*为了让看得简单清晰点，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;}
 
</style>
</head>
<body>
 
<div class="mdl">
   
   <h3>一张背景实现自  适应九宫格</h3>
   <p class="mdl_c_c">在原来的宽高自适应的九宫格基础上做了一些优化，把八个背景图请求改为一个，以降低网络成本。其实这也只是一些简单的小技巧，不过在切图方面会比较严禁有1px的不对称就会出问题，请留意下面例子的切割分析。</p><!--这里不应该直接用P的-->
   
   <div class="mdl_t_l"></div>
   <div class="mdl_t_c"><span></span></div>  
   <div class="mdl_t_r"></div>
   
   <div class="mdl_c_l"><span></span></div>
   <div class="mdl_c_r"><span></span></div>
  
   <div class="mdl_b_l"></div>
   <div class="mdl_b_c"><span></span></div>
   <div class="mdl_b_r"></div>
     
</div><!--mdl-->
 
</body>
</html>

    方法三：使用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;
    评论

报告相同问题？

悬赏问题

  • ¥15 sqlite 附加（attach database）加密数据库时，返回26是什么原因呢？
  • ¥88 找成都本地经验丰富懂小程序开发的技术大咖
  • ¥15 如何处理复杂数据表格的除法运算
  • ¥15 如何用stc8h1k08的片子做485数据透传的功能？(关键词-串口)
  • ¥15 有兄弟姐妹会用word插图功能制作类似citespace的图片吗？
  • ¥200 uniapp长期运行卡死问题解决
  • ¥15 latex怎么处理论文引理引用参考文献
  • ¥15 请教：如何用postman调用本地虚拟机区块链接上的合约？
  • ¥15 为什么使用javacv转封装rtsp为rtmp时出现如下问题：[h264 @ 000000004faf7500]no frame？
  • ¥15 乘性高斯噪声在深度学习网络中的应用