另一種方式去是一個僞元素(IE8 +)
JSfiddle Demo
CSS
.container{
max-width: 200px;
border: 1px solid black;
position: relative;
}
.container img{
max-width: 200px;
}
.container:after {
position: absolute;
content:" ";
top:0;
left:0;
height:100%;
width:100%;
background: -webkit-gradient(top, from(rgba(255, 255, 255, 0)), color-stop(0.65, rgba(255, 255, 255, 0.7)), color-stop(1, rgba(47, 39, 39, 0.5)));
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 65%, rgba(47, 39, 39, 0.7));
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 65%, rgba(47, 39, 39, 0.7));
background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 65%, rgba(47, 39, 39, 0.7));
background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 65%, rgba(47, 39, 39, 0.7));
background: linear-gradient(top, rgba(255, 255, 255, 0) 65%, rgba(47, 39, 39, 0.7));
}
不錯.. +1爲完美的解決方案。 –