需求:一个jpg的图片,当鼠标划上去的时候,图片显示颜色加深,如图
实现:
html
<a href="###"><img src="images/left-pop-01.jpg" alt=""></a>
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;
}