背景图片与背景颜色的问题_html/css

来源：华拓科技网

昨天在做输入框的时候，遇到了点问题，先给效果图吧。

效果图如下：

源代码如下：

#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;

效果如下所示：

这样就搞定了。