现在很多新闻站都有图文说明但是以往的显示方式不太美观，如果在图片底部层上添加一个半透明阴影的遮罩效果上面添加说明文字这样看起来更有质感，如图：
html代码:
[code]<div class=”imagearea-top”>
<div class=”image-mask-item”>
<a href=”#” target=”_blank” class=”item-image” mon=”ct=0&c=internews&pn=1&a=12″ title=””><img alt=”” src=”#”></a>
<a href=”#” target=”_blank” class=”item-title” title=”” mon=””>伊朗5千万人14日选总统 或改变未来…</a>
</div>
</div>[/code]
css代码：
[code].imagearea .imagearea-top {
height: 160px;
overflow: hidden;
}
.image-mask-item {
position: relative;
width: 240px;
height: 160px;
overflow: hidden;
}
.image-mask-item a:link, .image-mask-item a:visited, .image-mask-item a:hover {
color: #fff;
}
.image-mask-item .item-title {
position: absolute;
bottom: 0;
left: 1px;
width: 218px;
padding: 0 10px;
height: 40px;
line-height: 40px;
background-color: rgba(0,0,0,.5);
font: normal 12px/40px 宋体B8B\4F53;
text-decoration: none;
overflow: hidden;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = ‘true’,startColorstr = ‘#50000000’,endColorstr = ‘#50000000’);
}
.image-mask-item .item-image img {
display: block;
border: 1px solid #dcdcdc;
width: 238px;
height: 158px;
}[/code]