重複圖像背景

Question

我有一個使用的背景圖像這200通過使用以下css類

.searchBar{ 
    border-style: hidden; 
    border-width: 0px; 
    color: #FFFFFF; 
    padding-left: 10px; 
    padding-right: 10px; 
    font-size:1em; 
    background-image: url(images/searchBox2.gif); 
    font-family: "calibri", "helvetica", sans-serif; 
    margin-left:1%; 
    width: 200px; 
    height: 25px; 
    outline: 0 none; 
    vertical-align: middle; 
    } 

出於某種原因，25像素搜索欄，它延伸通過所述元件的220 27字段（左側和右側的10個填充以及另一個類的頂部和底部的另一個1個填充）並且重複背景圖像。它以我想要的方式工作，直到我最近在我的代碼中添加了doctype html 4.01 transitional爲止。下面是我的意思的視覺鏈接： Picture of Search Bar before and after

Answer 1

填充加起來就是元素的總寬度。查看示例以瞭解如何獲得相同的結果。

不填充

.searchbar { 
    width: 200px; 
} 

隨着填充

.searchbar { 
    width: 180px; 
    padding: 0 10px; 
} 

，並避免重複背景使用background-repeat:no-repeat;

這是你的完整的解決方案

.searchBar{ 
    border-style: hidden; 
    border-width: 0px; 
    color: #FFFFFF; 
    padding-left: 10px; 
    padding-right: 10px; 
    font-size:1em; 
    background-image: url(images/searchBox2.gif); 
    background-repeat: no-repeat; 
    font-family: "calibri", "helvetica", sans-serif; 
    margin-left:1%; 
    width: 180px; 
    height: 25px; 
    outline: 0 none; 
    vertical-align: middle; 
    } 

您也可以使用略寫的背景合併的背景樣式

background: url(images/searchBox2.gif) no-repeat; 

您還可以使用速記填充合併您填充左，右

padding: 0 10px;