实现精灵图片绝对定位的三种方式（伪）

最新推荐文章于 2024-06-16 18:12:42 发布

星灭233

最新推荐文章于 2024-06-16 18:12:42 发布

阅读量704

点赞数

文章标签：定位列表 html css html5

本文链接：https://blog.csdn.net/ksx2333/article/details/112696693

版权

本文探讨了在前端开发中使用CSS精灵图进行元素定位的三种常见方法，包括将精灵图作为背景、使用inline-block布局以及结合a标签的并列显示。在实践中，作者遇到并解决了图片大小超出预期的问题，最终找到了满意解决方案。

摘要由CSDN通过智能技术生成

精灵图片绝对定位的三种方式（伪）

有强迫症的我为此困扰了一上午，说白了还是自己实力不够，想法总被局限。
在这里插入图片描述

实现结果如上图中间的为最终满意样品
整体用列表写的`
左1：
把整体看成一个背景图加上面文字；
缺陷：由于图片样式随着背景大小改变导致图标大小超过预期设置20*20

                    <li>
                        <a href="" style="width: 20px;height:25px;
                        background-position:-10px -12px ;
                           padding-left: 25px;
                    background-image: url(imgs/layout_css_sprites.png)">VIP会员</a>
                    </li>

左2：
单独列出一个li使其上下标准，完美答法

      <li><a href=""
              style="width: 20px;height:20px;
              display:inline-block;
              margin-right: -22px;
              background: url(imgs/layout_css_sprites.png) no-repeat -10px -8px">
             </a>
     </li>
      <li><a href="" style="color: red">VIP会员</a></li>

左3：
单独写出一个a超链接，但与上面的a并列显示，没有达到预期。


    <li style="margin-top: 8px">
                        <a href=""
                           style="width: 20px;height:20px;
                           display:inline-block;
                           background: url(imgs/layout_css_sprites.png) no-repeat -10px -8px">
                        </a>
                        <a href="" style="">VIP会员</a>
    </li>