css引用圖片，有圖片屬性是兩端不拉伸中間拉伸的css屬性嗎

css引用圖片，有屬性可以控制兩端不拉伸中間拉伸嗎?

類(lèi)似于這種圖片，高度固定，兩端不拉伸，中間段拉伸。

類(lèi)似于這種圖片，圓角端不拉伸，中間拉伸

回答

編輯回答

懶洋洋

把圖片拆分成三張，用三個(gè)DIV拼接，分別是上、中、下，中間那張截取高度1PX就可以，然后縱向重復(fù)，可以根據(jù)內(nèi)容高度自適應(yīng)。

2017年2月16日 08:43

編輯回答

落殤

樓主最后是怎么實(shí)現(xiàn)的？

2017年2月14日 21:35

編輯回答

青瓷

樓主的需求，我的理解應(yīng)該是類(lèi)似于 android NinePatch 圖片

CSS中有一個(gè)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;
}

2018年2月17日 03:20