请教这种效果如何做的

2012-07-15

请问这种效果怎么做的？1.在京东商城上看到这样的展示效果，比如商品属于“热卖”、“人气”的在商品右上角加一个

请问这种效果怎么做的？
1.在京东商城上看到这样的展示效果，比如商品属于“热卖”、“人气”的在商品右上角加一个小图片标识一下，这个效果如何做？

2.另外，我发现它把一些常用的小图标放在一张整图上，需要用到时，根据比例从这张大图上截取所需要的图片区域（比如“人气”区域）来直接展示，通常我们是把这张大图切割成一张张小图片，那它是怎么实现在一张整图上截取部分来使用呢，对此很好奇，希望大家指点一下！

[解决办法]
大概的做法如下。
下面的红色部分 w,h,x,y,path 为你的实际数据。

HTML code

<style>  .product{width:[color=#FF0000]w[/color]px; height:[color=#FF0000]h[/color]px;overflow:hidden;}  .icon_1  {background-position:[color=#FF0000] x  y[/color]; } .iconLabel{ width:60px; height:60px; float:right; overflow:hidden; background-repeat:no-repeat; background-image:url([color=#FF0000]path[/color]);position:absolute; z-index:99}</style><div class="product">     <div class="icon_1  iconLabel">这里就是放图标的</div>     <img  src='imgpath'/></div>
[解决办法]
大概就是这样
HTML code<!DOCTYPE HTML><html lang=""><head>    <meta charset="gbk">    <title></title>    <style type="text/css">        .wrap {            width:120px;            position:relative;        }        .tip {            position:absolute; right:0; top:0;            width:52px; height:62px;            background:url(http://www.ycxwdq.com/x2.gif) no-repeat;        }    </style></head><body>    <div class="wrap">        <img src="http://avatar.profile.csdn.net/2/B/2/2_yctcsms.jpg" alt="" />        <span class="tip"></span>    </div></body></html>

热点排行

CSS

请教这种效果如何做的