做服务最好的
网站建设公司
当前位置:首页 > 建站资讯 > 网站建设

如何制作并使用css精灵图/css sprites?

发表日期:2018-04-14 14:04:17作者来源:方维网络浏览次数:95 标签: css精灵图    网站前端制作    

一,什么是css精灵图?

引用百度百科的原话,CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去。

二,为什么要使用css精灵图?

使用css精灵图主要有两点好处;
1.让小图(小图标),既请求一次大图,得到所有小图实现一次请求,减少对服务器的请求速度,避免网页造成延迟。
2.方便对小图(小图标)的管理。

三,如何制作并使用css精灵图?

主要分为两部分:

1.使用ps制作精灵图;

步骤演示:
  1. 新建一个透明的图层。
css新建图片
             图1
  1. 使用alt+鼠标滚动键,放大图层。
  2. 新建参考线;   
新建参考线
             图2
在实际测量小图大致宽高后,就开始建立参考线。比如,我的小图大致为25px*25px(宽高不超过25px*25px)。所以,我在参考线取向上水平方向建立了3条参考线(25像素、50像素、75像素);垂直方向建立了3条参考线(25像素、50像素、75像素)。
空白画布 
            图3     
  1. 依次放入各个小图(小图标);

放入图片
            图4
 
 
2.使用css和html代码显示精灵图的各个小图。

步骤演示:

 2-1.引入图片;(红色框内为主要代码)

  css代码
             图5
代码如下:
.jlt {
       background-image: url(../images/jlt.png);
       background-repeat: no-repeat;
       display: inline-block;
       width: 25px;
       height: 25px;
       vertical-align: bottom;
       margin-bottom: -5px;
}

2-2.利用css定位,定位各个小图。

代码如下:
.f1 {
      background-position: 0px 0px;
}
 
.f2 {
      background-position: -25px 0px;
    }
.f3 {
      background-position: 0px -25px;
}

2-3.使用html代码,使小图显示。

代码如下:


    

   

    
 

 

3-3.最终效果展示。

网站项目
                   图6
 

四,总结:


css制作总结
                                         图7
 
由图7得,根据各个比较,最后得出:当背景定位为0px 0px时;得到原点。改变数字就得到各个轴上的图片;
当第一个数字是正数时,为空(以原点为起始点,向左移动);当我第一个数字为负数时(以起点为原点,向右移动)。
当第二个数字为正数时,为空(以原点为起始点,向左移动);当我第二个数字为负数时(以起点为原点,向下移动)。
因此,第一个数字控制左右(正为左,负为右);第二个数字控制上下(正为上,负为下);原点的上方和左方都没有图标,所以为空。
Ps:如果我要得到白色袜子的话,数字为(-50px 0px);如果我要黄色袜子的话,数字为(-50px -25px)。
温馨提示:使用行内元素是无法显示图片的。

做账:
如没特殊注明,文章均为方维网络原创,转载请注明来自http://www.szfangwei.cn/news/4252.html

相关网站设计案例

相关推荐新闻

网页样式表的革新CSS3介绍...

随着HTML5一起到来的是CSS3,CSS全名是层叠样式表,是专门控制网...

日期:2018-04-14 浏览次数:2600

微信小程序大潮下的实体...

微信小程序的出现悄然而又惊人,李克强总理也提出了“互联网+”的...

日期:2018-04-14 浏览次数:84

如今的社会互联网对于企业...

如今的社会互联网对于企业的发展和生存都有着无可取代的地位,不仅...

日期:2018-04-14 浏览次数:91

设计师如何设计自己的生活

前言 我常说“每个人都是生活的设计师”。你做的每一个选择都有...

日期:2018-04-14 浏览次数:90

如何专业完成响应式...

随着科技互联网时代的发展,各种跨屏幕的设备层出不穷,小到智能手表...

日期:2018-04-14 浏览次数:87

全屏网页设计的几种形式

一、背景平铺内容居中 最常见的大图平铺自适应,图片质量是关键,它...

日期:2018-04-14 浏览次数:73

网页色彩艺术(2)-网页...

比起图像或图形布局要素来,文本配色就需要更强的可读性和可识别性...

日期:2018-04-14 浏览次数:80

中国手机销量下滑对网站建...

2018年4月9日,中国信息通信研究院发布了《2018年3月国内手机市场...

日期:2018-04-14 浏览次数:76

方维网络:企业网站为何要改...

每到年中,就迎来了企业网站改版的高峰期。这是因为,很多企业都要求...

日期:2018-04-14 浏览次数:93

方维网络:响应式网站设计的...

在方维网络看来,PC端和移动端存在的差异始终无法调和,这是由两者使...

日期:2018-04-14 浏览次数:93

网站改版目的:做出让用户...

记得一位从事网站建设的朋友说过:“网站从上线那天开始,就走向...

日期:2018-04-14 浏览次数:113

王卓:什么是简约设计

我们经常听到客户说:我对网站的要求是:欧美风格,简约而又不简单。而...

日期:2018-04-14 浏览次数:83

相关标签
CSS3css精灵图
网站建设解决方案
搜索引擎优化解决方案微信小程序定制开发解决方案企业网站解决方案