如何在CSS中水平拉伸圖像並使用3個獨立圖像在HTML上顯示

我正在嘗試創建一個搜索欄，中間拉伸。我有三個圖像：left.png，middle.png和right.png如何在CSS中水平拉伸圖像並使用3個獨立圖像在HTML上顯示

我試過這個代碼在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。

來源

2013-07-27 user2494251

嘗試設置上.div2爲「自動」的寬度，並設置：在.div3

「浮動權」看看這有助於

來源

2013-07-27 00:17:29 Bryce

刪除寬度：從.div2

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

15PX

對於插圖嘌呤，我爲div的背景添加了顏色。

這裏是分叉的小提琴：JsFiddle

來源

2013-07-27 00:18:38 JDuarteDJ

請分支原始的小提琴並在您的答案中使用它。當時沒有小提琴的 –

，會更新。 – JDuarteDJ

我覺得你錯誤地引用您的圖片。使用您的所有代碼，我只是發現一些圖片用作this fiddle的背景，完美地工作！

right.png不是唯一出現的圖片，但我認爲您的意圖是讓middle.png跨越整個搜索框背景。如果是這種情況，請從.div2刪除width:15px;，如here所示。

來源

2013-07-27 00:22:32 Trojan

如何在CSS中水平拉伸圖像並使用3個獨立圖像在HTML上顯示

回答

相關問題