如何用背景圖像爲背景顏色重新添加背景顏色？

Question

http://codepen.io/leongaban/pen/IFvEx

我有一個背景圖像裏面的基本輸入。但是，一旦添加了背景圖像，我就失去了輸入的白色背景顏色。

body { 
    background: #333; 
} 

input { 
    padding: 0 40px; 
    width: 80%; 
    height: 50px; 
    font-family: Arial; 
    font-size: 24px; 
    border: 0px; 
    color: #fff; 
    background: white; 
} 

#login-email{ 
    border-bottom: 1px solid #f7f7f7; 
    background: url('http://leongaban.com/_codepen/ico_email_input.png') no-repeat left center; 
    //background: white; 
} 

當我取消了background: white;行，我失去的背景圖像。在這種情況下，background-image也不起作用。

Answer 1

只需使用background-color而不僅僅是background。

發生這種情況的原因是因爲圖像是通過background屬性添加的，並且被顏色覆蓋。通過更具體地添加background-color，它不會覆蓋圖像。

Updated Codepen here - it works.

更新CSS

#login-email{ 
    border-bottom: 1px solid #f7f7f7; 
    background: url('http://leongaban.com/_codepen/ico_email_input.png') no-repeat left center; 
    background-color: white; 
    color:black; 
} 

如在下面的評論中提到，您也可以使用簡寫爲歡迎使用屬性背景：

background: white url('http://leongaban.com/_codepen/ico_email_input.png') no-repeat left center;