html - 如何在 CSS 中水平拉伸(stretch)图像并在 HTML 中显示 3 个单独的图像

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”

看看这是否有帮助