Heim > Web-Frontend > HTML-Tutorial > 背景图片与背景颜色的问题 - 林七七

背景图片与背景颜色的问题 - 林七七

WBOY
Freigeben: 2016-05-21 08:54:28
Original
2037 Leute haben es durchsucht
昨天在做输入框的时候,遇到了点问题,先给效果图吧。
效果图如下:
源代码如下:
#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;
效果如下所示:
这样就搞定了。
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage