css中用一张背景图做页面的技术有什么优势？

简单介绍一下 CSS Sprites 的优点：

当用户往U盘中拷200张图片，会等很久。但是如果弄成一个文件，再拷贝就会快很多。

CSS Sprites 的目的就是通过整合图片，减少对服务器的请求数量，从而加快页面加载

速度。

实现方法：

  • 首先将小图片整合到一张大的图片上
  • 然后根据具体图标在大图上的位置，给背景定位。background-position:-8px -95px;或者简写background:url(图片路径) no-repeat 8px -95px;

转载于: http://uicss.cn/css-sprites/

css中用一张背景图做页面的技术有什么优势？的更多相关文章

  1. CSS之全屏背景图

    吐槽啦:Yeah  明天就是国庆了o(*￣▽￣*)o!哈哈,提前祝福各位园友国庆快乐.假期愉快.生活美满.天天开心!国庆我要回家一趟,把一些不用的东西带回家,走访一下亲朋好友,在家打几天酱油~~~ 言 ...

  2. cocos2dx 3.x(一张背景图利用定时器实现循环轮播)

    // // MainScene.hpp // helloworld // // Created by apple on 16/9/19. // // #ifndef MainScene_hpp #de ...

  3. css3的新属性 新增的颜色--- 透明度---两种渐变---定义多张背景图--background-size

    css31==>颜色的6种表示的方法有6种表示颜色的方法 关键字 rgb rgba(css3) 16进制 hsl hsla hsla h=>是色相,值为360, s=>饱和度,0%- ...

  4. 清除css、javascript及背景图在浏览器中的缓存

    在实际项目开发过过程中,页面是上传到服务器上的.而为了减少服务器的压力,让用户少加载,浏览器会将图片.css.js缓存到本地中,以便下次访问网站时使用.这样做不仅减少了服务器的压力,并且也减少了用户的 ...

  5. 【Web前端】清除css、javascript及背景图在浏览器中的缓存

    在实际项目开发过过程中,页面是上传到服务器上的.而为了减少服务器的压力,让用户少加载,浏览器会将图片.css.js缓存到本地中,以便下次访问网站时使用.这样做不仅减少了服务器的压力,并且也减少了用户的 ...

  6. css设置全屏背景图，background-size 属性

    在写主题样式的时候经常会碰到用背景图铺满整个背景的需求,这里分享下使用方法 需要的效果 图片以背景的形式铺满整个屏幕,不留空白区域 保持图像的纵横比(图片不变形) 图片居中 不出现滚动条 多浏览器支持 ...

  7. 【CSS】div的背景图完整图片覆盖

    最初的代码: .container_first { width: 100%; height: 100%; background: url(10176581.jpg); background-size: ...

  8. CSS揭秘—灵活的背景图（三）

    前言: 所有实例均来自<CSS揭秘>,该书以平时遇到的疑难杂症为引,提供解决方法,只能说秒极了,再一次刷新了我对CSS的认知 该书只提供了关键CSS代码,虽然有在线示例代码链接,但访问速度 ...

  9. 通过css使用background-color为背景图添加遮罩效果

    一个div同时设置background-color和background-image的话,color是处于img层下方的,无法实现遮罩效果,所以需要再创建一个div作为其子div,然后设置子div的背 ...

随机推荐

  1. wpf布局控件总结

    首先要认识到wpf所有的布局控件都继承自Panel类,Panel类又继承自其他类.继承关系如下: 一.StackPanel布局面板 1.该面板在单行或者单列中以堆栈的形式放置其子元素. 默认情况下,S ...

  2. jsp 页面跳转后修改数据，返回时不更新

    项目jsp页面上用隐藏input框接收获取数据,在跳转入另一页面前,js操作修改数据,但返回时发现无效. 需求是点击抽奖后机会减少一次,但是当做跳转操作后返回时,次数有缓存问题 jsp: <in ...

  3. js 使用script或template标签:分离js代码template中的HTML元素

    参考:https://www.jianshu.com/p/332252abe016 方法一. script: <div id="app"> <com-first& ...

  4. for update行级锁的作用

    1.for update叫排它锁,是一种行级锁,一旦用户对某个行施加了行级加锁,则该用户可以查询也可以更新被加锁的数据行,其它用户只能查询但不能更新被加锁的数据行．如果其它用户想更新该表中的数据行,则 ...

  5. phpqrcode.php 生成二维码图片用于推广

    <?php /* * PHP QR Code encoder * * This file contains MERGED version of PHP QR Code library. * It ...

  6. sqlserver 下三种批量插入数据的方法

    本文将介绍三种批量插入数据的方法,需要的朋友可以参考下 本文将介绍三种批量插入数据的方法.第一种方法是使用循环语句逐个将数据项插入到数据库中:第二种方法使用的是SqlBulkCopy,使您可以用其他源 ...

  7. svn里update以后还是有红色的感叹号怎么办

    不用那么麻烦,直接还原就行了,客户端是TortoiseSVN的话,在该文件或文件夹上点右键,选择TortoiseSVN——revert有时还原之后系统反应没那么快,还是显示红色感叹号,刷新几下就正常了 ...

  8. mysql视图详解

    什么是视图  视图是从一个或多个表中导出来的表,是一种虚拟存在的表. 视图就像一个窗口,通过这个窗口可以看到系统专门提供的数据. 这样,用户可以不用看到整个数据库中的数据,而之关心对自己有用的数据. ...

  9. Ubuntn16.04安装opencv3.1（特别注意环境变量）

    参考:http://lib.csdn.net/article/opencv/25737: http://blog.csdn.net/yiranyhy/article/details/72935499: ...

  10. LUOGU P1680 奇怪的分组

    题目背景 终于解出了dm同学的难题,dm同学同意帮v神联络.可dm同学有个习惯,就是联络同学的时候喜欢分组联络,而且分组的方式也很特别,要求第i组的的人数必须大于他指定的个数ci.在dm同学联络的时候 ...