博客列表 >精灵图、阿里图标

精灵图、阿里图标

amin
amin原创
2020年06月20日 15:35:341481浏览

精灵图

  • css

    1. .box1 {
    2. width: 500px;
    3. height: 400px;
    4. border: 1px solid #000;
    5. background-image: url("1.png");
    6. background-repeat: no-repeat;
    7. background-position: 50px 20px;
    8. }
    9. .box2 {
    10. width: 110px;
    11. height: 110px;
    12. background-image: url("1.png");
    13. background-repeat: no-repeat;
    14. background-position: -220px -110px;
    15. }
    16. .box3 {
    17. width: 110px;
    18. height: 110px;
    19. background-image: url("1.png");
    20. background-repeat: no-repeat;
    21. background-position: -220px -220px;
    22. }
  • html

    1. <div class="box1"></div>
    2. <div class="box2"></div>
    3. <div class="box3"></div>
  • 效果图

阿里图标使用方法

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议