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

我可是兔子
  • 369
回复
阅读 7.9k
4 个回答
papersnake
  • 9.1k

楼主的需求,我的理解应该是类似于 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;
}

把图片拆分成三张,用三个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> 
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏