javascript - 水平拉伸图像中间

Question

如何水平拉伸图像的中间？

例如，我有这个图像：

_{（来源：lawrenceinspections.com）}

我希望圆角与现在相同（因此拉伸整个图像将不起作用）。我只想取中间并根据里面的内容来拉伸它。垂直的一切都应该保持相同的高度。

我该怎么做呢？谢谢！

Answer 1

1. 制作图像的副本并将其放入 style="overflow:hidden"; 的 div 中。
2. 该 div 中的中心图像；
3. 复制该 div 并在需要时将其并排放置；
4. 将 thouse div 用 start 和 end 两个 div 包裹起来，将你的 image start 和 image end 的副本计数一致；

Answer 2

您很可能需要三个单独的图像。和三个独立的 div。

左侧的 div 和图像的左侧，中心的 div - 这将是您的内容所在的位置，右侧的 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;
}