背景图像和颜色一起[重复]

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