请教这种效果如何做的
日期：2014-05-17 浏览次数：20889 次
请问这种效果怎么做的？
1.在京东商城上看到这样的展示效果，比如商品属于“热卖”、“人气”的在商品右上角加一个小图片标识一下，这个效果如何做？
2.另外，我发现它把一些常用的小图标放在一张整图上，需要用到时，根据比例从这张大图上截取所需要的图片区域（比如“人气”区域）来直接展示，通常我们是把这张大图切割成一张张小图片，那它是怎么实现在一张整图上截取部分来使用呢，对此很好奇，希望大家指点一下！
------解决方案--------------------
大概的做法如下。
下面的红色部分 w,h,x,y,path 为你的实际数据。
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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
