首页
登录 | 注册

CSS sprite

        CSS Sprites 原理:其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置。

CSS Sprites 优点:

    1、利用CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因;

    2、CSS Sprites能减少图片的字节,曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

    3、解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率。

    4、更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。维护起来更加方便。

    通过打开目前您的CSS文件夹下面的CSS图片碎片后,您可以自行拖拽CSS图片碎片技进行适当的位置调整,可以通过双击图片来移除该图片,进行CSS Sprite 操作时,拖拽与CSS Sprite 两个选项可随时切换使用。

        
    在线css sprite生成工具:
    http://css.v2bo.com/
    在线Css Sprite生成工具是一款非常强大的在线css sprites工具,基于HTML5的canvas实现,支持自动选取图片css sprites,支持拼接图片,能够帮助前端工程师迅速生成所需要的css,支持单张图片、拼接多张图片,可以说是前端开发中最强大的CSS前端工具。


相关文章

  • css 样式大全 字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 {font-style: oblique;}(偏斜体) ...
  • 栅格系统 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.它包含了易于使用的预定义类,还有强大的mixin 用于生成更具语义的布局. 简介 栅格系统用 ...
  • 自荐.net快速开发平台,新时代的选择
    力软信息 快速开发平台,不敢保证别人家的平台怎么样,但是对我们力软快速开发平台还是有信心的. 1.力软敏捷开发框架介绍 力软敏捷开发框架(learun framework)是力软快速开发平台推出的国内领先企业基础二次开发框架.Learun框 ...
  • LeaRun.Framework━ .NET快速开发框架 ━ 工作流程组件介绍
    LeaRun.Framework.NET,基于.NET的快速开发框架.整合框架,为企业或个人在.NET环境下快速开发系统提供了强大的支持,开发人员不需要开发系统的基础功能和公共模块,框架自身提供了强大的函数库和开发包,开发人员只须集中精力专 ...
  • CSS3盒模型 CSS有一种基础设计模式叫盒模型, 定义了Web页面中的元素是如何看做盒子来解析的. 每一个盒子有不同的展示界面, 在 CSS 中 主要有以下几种盒模型: inline.inline- block.block.table.a ...
  • 基于 HTML5 OpenLayers3 实现 GIS 电信资源管理系统
    前言 创建地图 初始化地图的操作则是将 Map 放进一个 div 元素中,初始化一个 ol.Map 地图类,这在整个电信资源管理系统中必不可少,然后设置这个类中的各个参数: var mapDiv = document.getElementB ...

2020 unjeep.com webmaster#unjeep.com
12 q. 0.012 s.
京ICP备10005923号