例如这个图，我只会写一个显示第一个爱心的图标，但是不会写第二个之后的，请求各位大佬帮忙，谢谢啦
61,126
社区成员
发帖
与我相关
我的任务
分享
...全文
请发表友善的回复…
发表回复
面向百度编程cv 2020-12-25
- 打赏
- 举报
图片定位
usecf 2020-12-25
- 打赏
- 举报
参考下这个 https://www.jb51.net/css/231042.html 根据图片的位置像素 分割图片
Raro2077 2020-12-25
- 打赏
- 举报
终于显示出来了，谢谢答主
usecf 2020-12-25
- 打赏
- 举报
<html>
<style>
<!-- .img0 {
background: url("1.gif") no-repeat scroll 0 -15px transparent;
width:35px;
height:15px;
}
.img1 {
background: url("1.gif") no-repeat scroll 0 -30px transparent;
width:35px;
height:15px;
}
.img2 {
background: url("1.gif") no-repeat scroll 0 0px transparent;
width:35px;
height:15px;
}
.img3 {
background: url("1.gif") no-repeat scroll 0 -45px transparent;
width:35px;
height:15px;
} -->
</style>
<body>
<!-- <img class="img0" >
<img class="img1" >
<img class="img2" >
<img class="img3" > -->
<div id="d1"></div>
</body>
</html>
<script>
window.onload = function(){
dynImg();
}
function dynImg(){
var d1=document.getElementById("d1");
for(var i=0; i<9; i++)
{
var img=document.createElement("img");
img.style.width="35px";
img.style.height="15px";
var ipx = -i*15+"px";
img.style.background ='url("1.gif") no-repeat scroll 0 ' +ipx+' transparent';
d1.appendChild(img);
}
}
</script>
效果图：
完整代码 动态加载图
完整代码 动态加载图海潮2 2020-12-25
- 打赏
- 举报
百度一下 雪碧图 你就知道了
usecf 2020-12-25
- 打赏
- 举报
<html>
<style>
.img0 {
background: url("1.gif") no-repeat scroll 0 -15px transparent;
width:35px;
height:15px;
}
.img1 {
background: url("1.gif") no-repeat scroll 0 -30px transparent;
width:35px;
height:15px;
}
</style>
<body>
<img class="img0" >
<img class="img1" >
</body>
</html>
七海七海七海。 2020-12-25
- 打赏
- 举报
css 属性 background-position来定位图片位置 ， .icon{background-position: x y;}
JiexC0la 2020-12-25
- 打赏
- 举报
通过background-position移动图片，background-position: 0 -16px;
Raro2077 2020-12-25
- 打赏
- 举报
能写下代码参考下吗，因为我的也差不多一样，就是要么不显示，要么整个GIF动图都出来，只会隐藏爱心logo之后的，试过clip rect一样不行----可能代码错误吧，搞不懂
Raro2077 2020-12-25
- 打赏
- 举报
能写下代码参考下吗，因为我的也差不多一样，就是要么不显示，要么整个GIF动图都出来，只会隐藏爱心logo之后的，试过clip rect一样不行----可能代码错误吧，搞不懂
Raro2077 2020-12-24
- 打赏
- 举报
第一个是30px 16px 第二的height是16px-32ox,就是不懂吧0-16px 32px-135px隐藏掉，知道用overflow hidden，所以只会第一个爱心的....
