类似优快云等级图片生成

csdn的等级图片其实就是一张图片，利用css来控制显示图片的一部分，利用background-position属性。

知识点：

background-position 属性设置背景图像的起始位置。

这个属性设置背景原图像的位置，背景图像如果要重复，将从这一点开始。

提示：您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。

默认值：	0% 0%
继承性：	no
版本：	CSS1
JavaScript 语法：	object.style.backgroundPosition="center"

浏览器支持

所有浏览器都支持 background-position 属性。

注释：任何版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

可能的值：

值	描述
top left                              top center                                  top right                                 center left                               center center                               center right                                bottom left                                 bottom center                               bottom right	如果您仅规定了一个关键词，那么第二个值将是"center"。 默认值：0% 0%。
x% y%	第一个值是水平位置，第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如果您仅规定了一个值，另一个值将是 50%。
xpos ypos	第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。 如果您仅规定了一个值，另一个值将是50%。 您可以混合使用 % 和 position 值。

background-position是以当前元素的左上角为中心，可以为负值，向上和向左为负，向下和向右为正，background-position：0 0 时，图片与当前元素的左上重合，在做翻转图片时可以想象，以当前元素的左上为中心固定不动，只移动图片，如果要当前元素里显示图片的下半部分时，实际上是将图片上移了，所以为负值；同理要当前元素里显示图片的右边部分，也就是将图片左移，同样为负值；这好像跟视觉上的向下和向右是相反的，但只要记住这一点，就不会弄错了....

 

Csdn例子：

第一步：准备一张图片，如

第二步：写样式控制输出

Css样式：

    img.grade {BACKGROUND:transparent url(../bbs/img/rank.png) no-repeat;} img.user1 {WIDTH: 16px; HEIGHT: 14px} img.user2 {WIDTH: 32px; HEIGHT: 14px} img.user3 {WIDTH: 49px; HEIGHT: 14px} img.user4 {WIDTH: 66px; HEIGHT: 14px} img.user5 {WIDTH: 85px; HEIGHT: 14px} img.star1 {BACKGROUND-POSITION: 0px -15px; width:18px; height:20px;} img.star2 {BACKGROUND-POSITION: 0px -15px; WIDTH: 36px; HEIGHT:20px} img.star3 {BACKGROUND-POSITION: 0px -15px; WIDTH: 54px; HEIGHT:20px} img.star4 {BACKGROUND-POSITION: 0px -15px; WIDTH: 72px; HEIGHT: 20px} img.star5 {BACKGROUND-POSITION: 0px -15px; WIDTH: 90px; HEIGHT: 20px} img.diam1 {BACKGROUND-POSITION: 0px -36px; WIDTH: 18px; HEIGHT: 20px} img.diam2 {BACKGROUND-POSITION: 0px -36px; WIDTH: 36px; HEIGHT: 20px} img.diam3 {BACKGROUND-POSITION: 0px -36px; WIDTH: 54px; HEIGHT: 20px} img.diam4 {BACKGROUND-POSITION: 0px -36px; WIDTH: 72px; HEIGHT: 20px} img.diam5 {BACKGROUND-POSITION: 0px -36px; WIDTH: 90px; HEIGHT: 20px}

第三步：显示图片

html代码：等 级：<img alt="" src="../img/images/blank.gif" class="grade <%# GetRank(Convert.ToInt32(Eval("rank").ToString()==""?"0":Eval("rank").ToString())) %>"/>

// rank为数据库字段 积分。

C#代码：

  //BBS等级 protected string GetRank(int rank) { string rankDeng=null; if (rank < 50) rankDeng= "user1"; else if (rank >= 50 && rank < 200) rankDeng = "user2"; else if (rank >= 200 && rank < 500) rankDeng = "user3"; else if (rank >= 500 && rank < 1000) rankDeng = "user4"; else if (rank >= 1000 && rank < 2000) rankDeng = "user5"; else if (rank >= 2000 && rank < 5000) rankDeng = "star1"; else if (rank >= 5000 && rank < 10000) rankDeng = "star2"; else if (rank >= 10000 && rank < 20000) rankDeng = "star3"; else if (rank >= 20000 && rank < 50000) rankDeng = "star4"; else if (rank >= 50000 && rank < 100000) rankDeng = "star5"; else if (rank >= 100000 && rank < 200000) rankDeng = "diam1"; else if (rank >= 200000 && rank < 500000) rankDeng = "diam2"; else if (rank >= 500000 && rank < 1000000) rankDeng = "diam3"; else if (rank >= 1000000 && rank < 2000000) rankDeng = "diam4"; else if (rank >= 2000000) rankDeng = "diam5"; return rankDeng; }

完成。