雪碧图布局

最近公司项目需要增加一个需求,需要给组件设置动画类型,而每种动画类型都需要一个对应的动画图标,这里就使用了雪碧图。

一、什么是雪碧图

百度百科:CSS雪碧 即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。

举个栗子:淘宝首页

上图中的图标,实际就是如下一张背景图

二、为什么要用雪碧图

减少Http请求数量,加速内容显示。因为每请求一次,就会和服务器建立一次链接,而建立链接是需要额外的时间的。

三、雪碧图布局

下面的代码为使用淘宝的背景图简单的实现以下效果

 1 <template>
 2    <div class="anima">
 3     <ul class="list">
 4         <li class="list-1">
 5             <i></i>
 6             <p>充话费</p>
 7         </li>
 8          <li class="list-2">
 9             <i></i>
10             <p>旅行</p>
11         </li>
12         <li class="list-3">
13             <i></i>
14             <p>车险</p>
15         </li>
16     </ul>
17 </div>
18 </template>
19 <script>
20 export default {};
21 </script>
22 <style lang="less" scoped>
23 .anima {
24   .list {
25     li {
26       cursor: pointer;
27       width: 60px;
28       height: 60px;
29       text-align: center;
30       float: left;
31       i {
32         background: url(/static/images/bj.png);
33         display: block;
34         width: 24px;
35         height: 24px;
36       }
37       p {
38         height: 24px;
39         width: 100%;
40         text-align: center;
41         line-height: 24px;
42       }
43     }
44     .list-1 {
45       i {
46         background-position: 0 0;
47         margin-left: 20px;
48       }
49     }
50
51     .list-2 {
52       i {
53         background-position: 0 -87px;
54         margin-left: 20px;
55       }
56     }
57
58     .list-3 {
59       i {
60         background-position: 0 -44px;
61         margin-left: 20px;
62       }
63     }
64   }
65 }
66 </style>

实现效果如下图

最后:一般制作雪碧图的时每个小图标的宽高应该是一样的,方便我们定位~

原文地址:https://www.cnblogs.com/yy136/p/9901545.html

时间: 2024-10-11 11:21:42

雪碧图布局的相关文章

使用 Compass 生成雪碧图

使用 Compass 创建一个项目 要在一个新项目中使用 Compass,可以打开命令行工具并输入如下指令 compass create my-project 如果 my-project 目录不存在,上述命令会创建一个叫做 my-project 的目录,并在其中添加以下文件: 如果你没有为compass create命令传递一个目录参数,它将使用你当前所在的目录. 在config.rb文件中,你可以对Compass的一些配置进行修改,例如资源位置和压缩程度.sass目录包含了一些初始的样式表,你

图片替换技术、雪碧图技术、图片透明技术、常用的电商布局方式

###雪碧图技术### !DOCTYPE html>     <html lang="en">     <head>     <meta charset="UTF-8">     <title>sprite雪碧图技术</title>         <style type="text/css">             div{                 widt

雪碧图,列表样式以及列表样式实现导航栏布局

雪碧图 <style> div { height: 28px; width: 28px; background-repeat: no-repeat; background-image: url("../../img/xuebitu.gif"); } #div2 { background-position: -85px 0; } #div3 { background-position: -163px -30px; } </style> <title>雪

移动端rem布局雪碧图解决方案 以及分享腾讯团队的在线雪碧图工具

先分享一下地址:http://alloyteam.github.io/gopng/ 使用的方法也很简单,将需要的小图标拖进去,全部拖进去后再调位置(每拖一个进去都会帮你排列好,但是没有间隔,所以全部拖进去后自己调) 然后点击右边绿色的make按钮即可 点击后,上面的选项会高亮,提示你制作好了, 点击PNG选项即可下载制作好的雪碧图, 点击css选项即可查看每个小图标在雪碧图中对应的x和Y位置 对于PC端来说,基本就完成了. 对于移动端采用rem布局的,则需要多一些步骤: 首先将对应的x和y位置转

响应式下的雪碧图解决方案

一.概述 在传统的居中布局时,我们常用background-position这个属性来进行雪碧图的定位,在减少数据量的同时,保证准确定位.在移动端使用越来越重的现在,以往的传统定位,已经无法达到目的,那么是否有合适的解决方案呢?答案是有的,让我们先来了解background的两个属性: background-position:背景图片相对容器原点的起始位置.详解可以查看另一篇博客:background-position 详解. background-size: 规定背景图的尺寸: 语法:back

compass做雪碧图

由于最近没什么时间好好写博文,我把用sass做雪碧图的关键点贴出来方便自己记忆: config.rb注释 # Set this to the root of your project when deployed: #配置服务器路径 http_path = "http//:www.baidu.com/" #配置css sass images javascripts路径 css_dir = "public/stylesheets" sass_dir = "pu

css sprite,css雪碧图生成工具V3.0更新

什么是css sprite CSS sprite在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了. 为什么要用这个工具 1.加快网页加载速度 浏览器接受的同时请求数是10个,如果图片过多会影响整体的视觉效果,而且对于不稳定的网络带宽,加载起来更是噩梦,所以把图片拼接为一张大图,从而加快加载速度,以及加速页面渲染 2.后期维护简单 该工具可以直接通过选择图片

使用compass自动合并css雪碧图(css sprite)(转载)

css雪碧图又叫css精灵或css sprite,是一种背景图片的拼合技术.使用css雪碧图,能够减少页面的请求数.降低图片占用的字节,以此来达到提升页面访问速度的目的.但是它也有令人诟病的地方,就是拼图和后期维护的成本比较大.也正是因为这一点,导致很多开发者懒于使用css雪碧图. 对于这种耗时.枯燥.重复性的工作,最好的解决方法还是交给工具去处理.本文就介绍下怎样使用compass来自动合并css雪碧图. 安装compass 首先请确认电脑已经安装ruby及sass环境,ruby及sass的安

CSS3技术-雪碧图自适应缩放

花了一个礼拜完成了慕课网定制的七夕主题效果,其中有一个没实现好的功能,就是雪碧图的自适应缩放 ps: 以下实现都是基于移动端的处理 原图如下: 人物是采用的是雪碧图,通过坐标绝对数据取值 问题很明显,在缩放的屏幕上人物还是按照原尺寸大小显示 后来临时留了一节预备的方案:CSS3的scale处理直接可以让元素缩放 通过一个缩放的算放控制scale从而让雪碧图的元素可以缩放,目测还是不错. 但是这会带一系列的计算问题,因为通过sacle缩放后的元素,在浏览器布局中还是按照原尺寸计算的,所以这样的方案