问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

css引用图片，有图片属性是两端不拉伸中间拉伸的css属性吗

头像
我可是兔子
    36911234
    css
    阅读 11.6k
    4 个回答
    得票最新
    头像
    papersnake
      12k31739

      楼主的需求，我的理解应该是类似于 android NinePatch 图片

      CSS中有一个border-image 差不多的功能，不知道是不是合适楼主，你可以看一下

      下面是功能演示
      http://jsbin.com/sutohaxahe/1...

      <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <span class="title">这是我使用的图片</span>
<img src="http://www.w3school.com.cn/i/border.png">
<div id="round">看我被图片包围了</div>
<div class="title">楼主的图片</div>
<img src="https://sfault-image.b0.upaiyun.com/333/390/3333902996-5a02cf581ceb1_articlex">
<div id="round2">楼主要的效果</div>
</body>
</html>

css部分


#round
{
-moz-border-image:url(http://www.w3school.com.cn/i/border.png) 30 30 round;    /* Old Firefox */
-webkit-border-image:url(http://www.w3school.com.cn/i/border.png) 30 30 round;    /* Safari and Chrome */
-o-border-image:url(http://www.w3school.com.cn/i/border.png) 30 30 round;        /* Opera */
border-image:url(http://www.w3school.com.cn/i/border.png) 30 30 round;
}

#round2 {
-webkit-border-image:url(https://sfault-image.b0.upaiyun.com/333/390/3333902996-5a02cf581ceb1_articlex) 40 40 ;
border-image:url(https://sfault-image.b0.upaiyun.com/333/390/3333902996-5a02cf581ceb1_articlex) 40 40 repeated;
}
      头像
      小林
        24544569

        把图片拆分成三张，用三个DIV拼接，分别是上、中、下，中间那张截取高度1PX就可以，然后纵向重复，可以根据内容高度自适应。

        头像
        WANGGANG
          1
          新手上路，请多包涵
          <style>
 .box1 {
 background-image: url('left.png'), url('right.png'), url('middle.png');
 background-position: left top, right bottom, left top;
 background-repeat: no-repeat, no-repeat, repeat-x;
 }
</style> 
 
<div class="box1" style="width:250px;height:69px"></div>
          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题
          宣传栏