html - 如何在 CSS 中水平拉伸图像并使用 3 个单独的图像在 HTML 上显示

Question

我正在尝试创建一个中间延伸的搜索栏。我有三个图像：left.png、middle.png 和 right.png

jsFiddle

我在 CSS 中尝试了这段代码：

.div1 {
    background-image:url('../images/searchbar_a_corner-left.png');
    background-repeat:no-repeat;
    width:15px;
    height:100px;
    float:left;
    padding:0;
    margin:0;
}

.div2 {
    background-image:url('../images/searchbar_a_corner-middle.png');
    background-repeat:repeat-x;
    width:15px;
    height:100px;
    float:left;
    padding:0;
    margin:0;
}  
.div3 {
    background-image:url('../images/searchbar_a_corner-right.png');
    background-repeat:no-repeat;
    width:15px;
    height:100px;
    float:left;
    padding:0;
    margin:0;
}

这在 HTML 中（我认为这是不正确的部分）：

<div class="div1">
    <img src="search-icon.svg" />
</div>

<div class="div2">
    <input id="search" type="text" />
</div>

<div class="div3"></div>

显示的所有内容都是 right.png。

Answer 1

尝试将 .div2 上的宽度设置为“auto”，并在 .div3 上设置“float: right”

看看这是否有帮助

Answer 2

从 .div2 中删除 width:15px

.div2 {
    background-image:url('../images/searchbar_a_corner-middle.png');
    background-repeat:repeat-x;
    height:100px;
    float:left;
    padding:0;
    margin:0;
}

为了说明目的，我为 div 的背景添加了颜色。

这是分叉的小提琴：JsFiddle

Answer 3

我认为您错误地引用了您的图片。使用你所有的代码，我刚刚找到了一些图片用作这个小提琴的背景，效果很好！

right.png不是唯一显示的图片，但我认为您的意图是middle.png跨越整个搜索框背景。如果是这种情况，请width:15px;从中删除，如此处.div2所示。