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. Python自学--part2

    概要 列表.元组操作 字符串操作 字典操作 集合操作 文件操作 字符编码与转码 一.列表.元祖操作 列表是我们最以后最常用的数据类型之一,通过列表可以对数据实现最方便的存储.修改等操作 定义列表 na ...

  2. 路飞学城-Python爬虫集训-第一章

    自学Python的时候看了不少老男孩的视频,一直欠老男孩一个会员,现在99元爬虫集训果断参与. 非常喜欢Alex和武Sir的课,技术能力超强,当然讲着讲着就开起车来也说明他俩开车的技术也超级强! 以上 ...

  3. 2019-4-16-C#-使用反射获取私有属性的方法

    title author date CreateTime categories C# 使用反射获取私有属性的方法 lindexi 2019-4-16 10:13:3 +0800 2018-09-26 ...

  4. 自动化运维工具Ansible工具

    目录 一.初识Ansible 二.Ansible的架构 三.Ansible基础使用 安装 主机清单 管理主机 四.Ansible用脚本管理主机 五.Ansible模块Module 六.Ansible常 ...

  5. Django中间件初始化过程

    def load_middleware(self): """ Populate middleware lists from settings.MIDDLEWARE. Mu ...

  6. Django项目：CRM(客户关系管理系统)--75--65PerfectCRM实现CRM课程分数排名

    # classtop_urls.py # ————————64PerfectCRM实现CRM课程排名详情———————— from django.conf.urls import url from b ...

  7. python冒泡排序算法的实现代码

    python冒泡排序算法的实现代码 这篇文章主要介绍了python冒泡排序算法的实现代码,大家参考使用 1.算法描述: (1)共循环 n-1 次 (2)每次循环中,如果 前面的数大于后面的数,就交换 ...

  8. OpenCV cvReleaseImage把图像怎么样了？

         cvReleaseImage(img)和free.delete相同,只是把该指针img所指的内存给释放掉,但并没有把img指针本身干掉,其地址仍然不变(非NULL),只是该地址对应的内存是垃 ...

  9. leetcode 448 - 476

    448. Find All Numbers Disappeared in an Array Input: [4,3,2,7,8,2,3,1] Output: [5,6] 思路:把数组的内容和index ...

  10. 怎么比较两个list中相同的值个数！

    怎么比较两个list中相同的值个数!int count=0;for(int i=0;i<list1.size();i++){ for(int j=0;j<list2.size();j++) ...