Rumah > hujung hadapan web > html tutorial > 背景图片与背景颜色的问题 - 林七七

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

WBOY
Lepaskan: 2016-05-21 08:54:28
asal
2038 orang telah melayarinya
昨天在做输入框的时候,遇到了点问题,先给效果图吧。
效果图如下:
源代码如下:
#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;
效果如下所示:
这样就搞定了。
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan