在網頁設計中，搜索框通常是一個重要的組件。搜索框的樣式對于網站的外觀而言也至關重要。CSS是一種強大的工具，可以用于控制搜索框的樣式。在這篇文章中，我們將介紹如何使用CSS設置搜索背景。

/*設置搜索框的樣式*/
input[type="text"] {
background-color: #f2f2f2;
border: none;
padding: 10px;
font-size: 16px;
width: 300px;
margin-top: 10px;
}
/*設置搜索按鈕的樣式*/
input[type="submit"] {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-decoration: none;
margin-top: 10px;
}
/*設置搜索框的背景*/
input[type="text"]::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
background-image: url('search.png');
background-repeat: no-repeat;
background-size: 20px;
padding-left: 30px;
}
input[type="text"]::-moz-placeholder {
/* Firefox 19+ */
background-image: url('search.png');
background-repeat: no-repeat;
background-size: 20px;
padding-left: 30px;
}
input[type="text"]:focus::-webkit-input-placeholder {
/* Chrome/Opera/Safari */    
background-color: #fff;
opacity: 0.8;
}
input[type="text"]:focus::-moz-placeholder {
/* Firefox 19+ */
background-color: #fff;
opacity: 0.8;
}

CSS使用了偽元素`::-webkit-input-placeholder`和`::-moz-placeholder`來設置搜索框的背景。這兩個偽元素允許開發者為搜索框的占位符文本添加樣式。我們使用了`background-image`屬性來設置圖片作為搜索背景，并通過`background-size`調整圖片大小，并且通過`padding-left`參數讓輸入框在輸入內容時不會覆蓋圖片。

在上述CSS代碼中，我們還為搜索框的占位符文本添加了一些效果來提高用戶體驗。當用戶點擊搜索框時，我們通過`focus`偽元素為占位符文本添加了半透明的背景，以提示用戶正在輸入信息。