精灵图的使用

最新推荐文章于 2024-01-15 16:13:04 发布

ahytc

最新推荐文章于 2024-01-15 16:13:04 发布

阅读量355

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_57633481/article/details/128130152

版权

使用方法：
1、先确定好你要使用哪个图片或者图标
2、测量图片的大小例如：290*300
3、根据测量的结果去建一个盒子，对外展示
4、将图片作为背景图引入到盒子中
5、设置图片的位置，以正确的显示图片
background-position：水平方向垂直方向值；
水平方向：正值图片向右，负值图片向左
垂直方向：正值图片向下，负值图片向上

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title></title>
  <style type="text/css"></style>
  <!--
解决图片闪烁问题，提高网站的性能，可以使用 雪碧图/精灵图 ,学名：图片整合技术
      实现原理：
        将多张图片整合在一起，然后一次性引入到网站中，
          减少网络请求，以提高网站的性能
      实现步骤：
        1、先确定好你要使用哪个图片或者图标
        2、测量图片的大小  例如：290*300
        3、根据测量的结果去建一个盒子，对外展示
        4、将图片作为背景图引入到盒子中
        5、设置图片的位置，以正确的显示图片
         background-position：水平方向 垂直方向值；
           水平方向：正值  图片向右，负值  图片向左
           垂直方向：正值  图片向下，负值  图片向上

    面试题：请你从提高网站性能上，简述你的建议
          其中一种方式就是雪碧图/精灵图的使用
     -->
  <style>
    a {
      display: block;
      width: 155px;
      height: 64px;
      background-color: red;
      background-image: url(./亚马逊精灵图.png);
      background-position: -265px -343px;
    }

    /* a:hover{
         background-position: 100px 100px;
         
       } */
  </style>
</head>

<body>
  <!-- 创建一个超链接 -->
  <a class="btn" href="#"></a>
</body>

</html>

ahytc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
精灵图的使用

1、先确定好你要使用哪个图片或者图标2、测量图片的大小例如：290*3003、根据测量的结果去建一个盒子，对外展示4、将图片作为背景图引入到盒子中5、设置图片的位置，以正确的显示图片 background-position：水平方向垂直方向值；水平方向：正值图片向右，负值图片向左垂直方向：正值图片向下，负值图片向上
复制链接

扫一扫