在CSS中,我們可以使用background-image
屬性來(lái)在input
元素中添加圖片,以下是一個(gè)示例:
input[type="text"] { background-image: url("path/to/your/image.png"); background-repeat: no-repeat; background-position: right; }
在這個(gè)示例中,我們?yōu)槲谋绢愋偷?code>input元素添加了一個(gè)背景圖片。url("path/to/your/image.png")
是圖片的路徑,你需要將其替換為你自己的圖片路徑。background-repeat: no-repeat;
表示圖片不會(huì)重復(fù)顯示,background-position: right;
表示圖片會(huì)顯示在元素的右側(cè)。
如果你想要在input
元素的左側(cè)添加圖片,可以使用padding-left
屬性來(lái)設(shè)置圖片的位置:
input[type="text"] { padding-left: 30px; background-image: url("path/to/your/image.png"); background-repeat: no-repeat; background-position: left; }
在這個(gè)示例中,圖片會(huì)顯示在元素的左側(cè),padding-left: 30px;
表示圖片左側(cè)與元素左側(cè)之間的間隔為30像素,你可以根據(jù)需要調(diào)整這個(gè)值。
這種方法只適用于CSS支持的瀏覽器,并且圖片路徑必須是正確的,否則圖片將無(wú)法正確顯示。