根据css背景图属性+css定位制作雪碧图效果
16lz
2022-05-11
根据css背景图属性+css定位制作雪碧图效果
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>雪碧图</title><style>div{width:100px;height:100px;background-image:url('https://img.php.cn/upload/image/587/391/184/1652174108167035.jpg');background-repeat:no-repeat;background-position:center;padding:0;}.box{width:300px;height:300px;background-image:none;position:relative;}.box1{background-position:-11px-8px;}.box2{background-position:-121px-8px;position:absolute;left:100px;top:0;}.box3{background-position:-231px-8px;position:absolute;left:200px;top:0;}.box4{background-position:-341px-8px;position:absolute;left:0;top:100px;}.box5{background-position:-451px-8px;position:absolute;left:100px;top:100px;}.box6{background-position:-561px-8px;position:absolute;left:200px;top:100px;}.box7{background-position:-671px-8px;position:absolute;left:0;top:200px;}.box8{background-position:-781px-8px;position:absolute;left:100px;top:200px;}.box9{background-position:-891px-8px;position:absolute;left:200px;top:200px;}</style></head><body><divclass="box"><divclass="box1"></div><divclass="box2"></div><divclass="box3"></div><divclass="box4"></div><divclass="box5"></div><divclass="box6"></div><divclass="box7"></div><divclass="box8"></div><divclass="box9"></div></div></body></html>运行实例 »
点击 "运行实例" 按钮查看在线实例
更多相关文章
- Android应用中通过AIDL机制实现进程间的通讯实例
- Android中Image的简单实例详解
- Android(安卓)开发艺术探索笔记-Activity启动方式
- Android(安卓)中Seekbar详解及简单实例
- Android(安卓)Diaolog与AlertDialog用法实例
- ESC/POS指令集在Android设备上使用实例（通过socket）
- 实例演示简单分页操作
- Android中使用Serializable和Parcelable实现序列化详解（含实例）
- 实例演示：盒模型常用属性、媒体查询以及em,rem用法