昨天在做输入框的时候，遇到了点问题，先给效果图吧。
效果图如下：
源代码如下：
#search-input{
border: none;
border-radius: 6px;
height: 35px;
width: 62%;
margin-left: 3%;
margin-right: 3%;
font-size: 0.9rem;
font-weight: 600;
text-align: center;
background-color: #d7d7d9;
background: url(../images/search.png) no-repeat 3% center;
background-size: 17px;
padding: 0 8%;
}
效果图如下：
分析：结果发现背景颜色没了，翻了下论坛，发现background的写法很重要，如果又想有背景图片，又需要背景色，那就需要注意写法。如果先设背景色再设背景图，那么背景色就会被背景图覆盖掉。
所以可以写为：
background: #d7d7d9 url(../images/search.png) no-repeat 3% center;
效果如下所示：
这样就搞定了。
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
684
收藏
