橫向拉伸圖像的中間部分

Question

如何橫向拉伸圖像的中間部分？

例如，我有這樣的形象：

Glossy button background http://www.lawrenceinspections.com/glossy_button_blank_blue_oval.jpg

我想圓角是一樣的，因爲它是現在（所以拉伸整個圖像將無法正常工作）。我只是想採取中間和基於什麼內容是內部拉伸它。垂直的一切都應該保持相同的高度。

我該怎麼做？謝謝！

Answer 1

1. 製作一個圖像的副本，並把它放在style =「overflow：hidden」的div上;
2. 該div中的中心圖像;
3. Dublicate div並將它並排放置在任何需要的時間;
4. 用兩個div來包裹thouse divs，並且最終將你的圖片開始和圖片的結局合起來;

Answer 2

你很可能需要三張獨立的圖片。還有三個獨立的div。

一格爲左側與圖像的左側，一格爲中心 - 這將是你的內容是哪裏，一格的右側，這也將只是一個圖像。

希望這是有道理的。您也可以使用純CSS製作類似的按鈕，而不使用任何圖形。

下面是純CSS的例子（儘管那不是你問什麼，我知道:)）：

http://jsfiddle.net/PWNLf/1/

.button{ 
    background: rgb(194,172,224); /* Old browsers */ 
background: -moz-linear-gradient(top, rgba(194,172,224,1) 0%, rgba(232,241,242,1) 30%, rgba(186,241,244,1) 31%, rgba(18,65,206,1) 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(194,172,224,1)), color-stop(30%,rgba(232,241,242,1)), color-stop(31%,rgba(186,241,244,1)), color-stop(100%,rgba(18,65,206,1))); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, rgba(194,172,224,1) 0%,rgba(232,241,242,1) 30%,rgba(186,241,244,1) 31%,rgba(18,65,206,1) 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, rgba(194,172,224,1) 0%,rgba(232,241,242,1) 30%,rgba(186,241,244,1) 31%,rgba(18,65,206,1) 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, rgba(194,172,224,1) 0%,rgba(232,241,242,1) 30%,rgba(186,241,244,1) 31%,rgba(18,65,206,1) 100%); /* IE10+ */ 
background: linear-gradient(to bottom, rgba(194,172,224,1) 0%,rgba(232,241,242,1) 30%,rgba(186,241,244,1) 31%,rgba(18,65,206,1) 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c2ace0', endColorstr='#1241ce',GradientType=0); /* IE6-9 */ 
color: #fff; 
font-family: helvetica; 
padding: 30px 60px; 
    border-radius: 40px; 
    text-decoration: none; 
    border: 1px solid #1241CE; 
}