背景图像和颜色在一起

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;
}