Question

如何水平拉伸图像中间？

例如，我有这张图片：

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

我希望圆角与现在相同（因此拉伸整个图像将无效）。我只想根据里面的内容来调整中间位置。垂直方向应保持相同的高度。

我该怎么做？谢谢！

Answer 1

制作图像的副本并将其放入带有样式=＆＃34的div：overflow：hidden＆＃34;;
该div中的中心影像;
在任何需要的时候，将div并排放在一起;
在starn和end上用两个div包裹thouse divs，依次计算你的图像开始和图像结束的副本;

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;
}

水平拉伸图像中间

2 个答案: