背景圖像和顏色一起

Question

我怎麼可以給一個div然後一個背景圖片則使其更暗了一下，當我懸停div的我想要的顏色越深刪除

<div id="bg"> 
    <h1>Cat</h1> 
</div> 

CSS：

#bg{ 
     height: 200px; 
     width: 200px; 
     background: rgba(0,0,0,0.7) url(http://i.imgur.com/IMiabf0.jpg) ; 
     background-size: cover; 
     color: red 
    } 
    #bg:hover{ 
    background:url(http://i.imgur.com/IMiabf0.jpg) ; 
    } 

Answer 1

試試這個：

#bg{ 
    height: 200px; 
    width: 200px; 
    background:linear-gradient(rgba(0,0,0, 0.7), rgba(0,0,0, 0.7)), url(http://i.imgur.com/IMiabf0.jpg) ; 
    background-size: cover; 
    color: red 
} 
#bg:hover{ 
    background:url(http://i.imgur.com/IMiabf0.jpg) ; 
    background-size: cover; 
}