本篇主要介绍一些按照百分比来截取显示一部分图片, 采用css+div来定义,我自己试过一个做背景,一个图片,然后百分比显示图片但是这种方式图片变形,所以现在这种方式是两个都采用背景,上面的一个百分比显示。
<div class="ct_shanghu_pingjia_xing">
<I class="star_large vimg"><I style="WIDTH:78%" class="star_red"></I></I> /***备注:宽度可以根据要求自行读取***/
</div>
这是95_star_big.png图片,效果图为
以下为css里定义部分
.ct_shanghu_pingjia_xing{ PADDING-BOTTOM: 2px}
.star_large {
DISPLAY: inline-block; OVERFLOW: hidden;
}
.star_large {
BACKGROUND: url(../images/95_star_big.png) repeat-x
}
.star_large .star_red {
BACKGROUND: url(../images/95_star_big.png) repeat-x
}
.star_large {
WIDTH: 115px; HEIGHT: 20px;
}
.star_large .star_red {
BACKGROUND-POSITION: 0px -20px; float:left; /*如果不定义有时候会出现倒影的效果,和背景对不齐*/
}
.star_red {
DISPLAY: block; HEIGHT: 100%;
}
.vimg {
MARGIN-BOTTOM: -3px
}