Home > Web Front-end > HTML Tutorial > 背景图片与背景颜色的问题 - 林七七

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

WBOY
Release: 2016-05-21 08:54:28
Original
2038 people have browsed it
昨天在做输入框的时候,遇到了点问题,先给效果图吧。
效果图如下:
源代码如下:
#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;
效果如下所示:
这样就搞定了。
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template