在CSS中,可以使用background-image
屬性將圖片添加到輸入框中,以下是一個(gè)示例:
input[type="text"] { background-image: url("image.png"); background-repeat: no-repeat; background-position: right; }
在這個(gè)示例中,我們將圖片image.png
添加到輸入框的右側(cè),并且設(shè)置圖片不重復(fù)顯示,您可以根據(jù)需要調(diào)整background-position
屬性來控制圖片的位置。
如果您希望在輸入框中直接顯示圖片,而不是作為背景,可以使用object-fit
屬性來設(shè)置圖片的大小和位置,以下是一個(gè)示例:
input[type="text"] { width: 200px; height: 200px; object-fit: cover; }
在這個(gè)示例中,我們將輸入框的寬度和高度都設(shè)置為200px,并使用object-fit: cover
來確保圖片始終填充整個(gè)輸入框,而不會(huì)變形,您可以根據(jù)需要調(diào)整width
、height
和object-fit
屬性來控制圖片的大小和位置。