给图片添加背景色

 

需求：一个jpg的图片，当鼠标划上去的时候，图片显示颜色加深，如图

实现：

html

css 

/*给a添加背景颜色为黑色*/
a{
    width: 98px;
    height: 97px;
    background-color: black;
    display: inline-block;
}

/*给图片添加背景为白色，并设置透明度*/
img{
    width: 98px;
    height: 97px;
    display: inline-block;
    background:#fff; 
    opacity:.9;
}
/*当浮动的时候改变图片的透明度*/
img:hover{
    background: #fff;
    opacity: 0.8;
}