如何用CSS backgroundImage在Input元素实现Instagram导航栏效果

我尝试给Input元素添加背景图，使用CSS的backgroundImage属性，取值为url('http://localhost:3000/uploads/icons8-search (1).svg')。该图片存储在后端uploads文件夹中，Ctrl+Click可正常访问该URL，想要实现类似Instagram导航栏的搜索框效果，但背景图未按预期显示。以下是我的React组件代码：

export function Navbar() {
    const userInfo = useContext(UserContext)
    console.log(userInfo)
    return <>
        <nav style={{ position: 'sticky', top: '0px', width: '100%', height: '6rem', display: 'flex', alignItems: 'center', justifyContent: 'space-evenly', margin: 'auto', backgroundColor: 'white', border: '0.1px solid grey' }}>
            <ul style={{ listStyleType: 'none', display: 'flex', justifyContent: 'space-between', gap: '3em' }}>
                <li style={{ display: 'flex', alignItems: 'center' }}><a style={{ fontSize: '2rem' }}>INSTAGRAM</a></li>
                <li style={{ display: 'flex', alignItems: 'center' }}><input style={{ height: '50px', backgroundImage: 'url(`http://localhost:3000/uploads/icons8-search (1).svg`)' }} className='inputNavbar__displayNone' placeholder='Search' /></li>
                <li><HomeIcon style={{ height: '50px' }} /></li>
                <li><ChatBubbleOutlineIcon style={{ height: '50px' }} /></li>
                <li><AddCircleOutlineIcon style={{ height: '50px' }} /></li>
                <li><NearMeIcon style={{ height: '50px' }} /></li>
                <li><FavoriteBorderIcon style={{ height: '50px' }} /></li>
                <li>{userInfo?.media ?
                    <img style={{ height: '40px', width: '24px', border: '1px solid black', borderRadius: '40px' }} src={`${serverUrl}/${userInfo.media}`} /> :
                    <img style={{ height: '40px', width: '24px', border: '1px solid black', borderRadius: '40px' }} src={`${serverUrl}/uploads/search-grey-1.png`} />}
                </li>
            </ul>
        </nav>
    </>
}

1. 修正backgroundImage语法错误 #

你在backgroundImage的URL中错误使用了反引号，导致CSS解析失败。需要将反引号替换为单引号或双引号，确保引号嵌套正确：

backgroundImage: "url('http://localhost:3000/uploads/icons8-search (1).svg')"

或者：

backgroundImage: 'url("http://localhost:3000/uploads/icons8-search (1).svg")'

2. 添加背景图样式属性（贴近Instagram效果） #

仅设置backgroundImage不足以实现类似Instagram的搜索框效果，还需要添加定位、重复、大小控制，并调整内边距避免输入内容覆盖图标：

input style={{
    height: '50px',
    paddingLeft: '40px', // 给图标留出空间
    backgroundImage: "url('http://localhost:3000/uploads/icons8-search (1).svg')",
    backgroundPosition: 'left 12px center', // 调整图标位置
    backgroundRepeat: 'no-repeat', // 禁止重复
    backgroundSize: '20px', // 控制图标大小
    border: '1px solid #dbdbdb', // 仿Instagram边框
    borderRadius: '8px', // 圆角
    fontSize: '14px',
    width: '250px' // 调整输入框宽度
}}

3. 修改后的完整Input代码 #

<li style={{ display: 'flex', alignItems: 'center' }}>
    <input 
        style={{
            height: '50px',
            paddingLeft: '40px',
            backgroundImage: "url('http://localhost:3000/uploads/icons8-search (1).svg')",
            backgroundPosition: 'left 12px center',
            backgroundRepeat: 'no-repeat',
            backgroundSize: '20px',
            border: '1px solid #dbdbdb',
            borderRadius: '8px',
            fontSize: '14px',
            width: '250px',
            boxSizing: 'border-box'
        }} 
        className='inputNavbar__displayNone' 
        placeholder='Search' 
    />
</li>

内容的提问来源于stack exchange，提问作者tal moshel