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. 【LGP4705】玩游戏

    题目 显然这个题的期望就是逗你玩的,我们算出来总贡献除以\(nm\)就好了 设\(ans_t=\sum_{i=1}^n\sum_{j=1}^n(a_i+b_j)^t\) 二项式定理展开一下 \[ans ...

  2. C++【string】用法和例子

    /*** * string 基础api复习 * 8 AUG 2018 */ #include <iostream> #include <string> using namesp ...

  3. C++字符串前面加LR

    const std::experimental::filesystem::path symbolsFilename = LR"(d:\fulongtech_git\draing_recogn ...

  4. linux为内核新增系统调用

    1.编写hello.c文件,实现系统调用执行函数,如: asmlinkage long sys_helloworld(void){ printk( "helloworld!"); ...

  5. 同一服务器不同域名session共享

    Tomcat下,不同的二级域名之间或根域与子域之间,Session默认是不共享的,因为Cookie名称为JSESSIONID的Cookie根域是默认是没设置 的,访问不同的二级域名,其Cookie就重 ...

  6. Unity 在2D中实现LookAt

    由于Transform.LookAt是使Z轴看向目标,而2D基本是由X和Y轴构成的.所以在2D的游戏中,不太好使用. 所以用代码实现一个2D的LookAt函数. 例子: 我们使怪物的眼睛一直看着云. ...

  7. mysql导入数据

    1.准备sql文件:第一句话就是指定要操作的数据库,然后是insert语句,或者update语句或者delete语句 2.登录数据库,并执行:    source       sql文件位置 不要直接 ...

  8. Vue 本地代理 纯前端技术解决跨域

    vue-axios获取数据很多小伙伴都会使用,但如果前后端分离且后台没设置跨域许可,那要怎样才能解决跨域问题? 常用方法有几种: 通过jsonp跨域 通过修改document.domain来跨子域 使 ...

  9. Webpack构建前端项目

    前言 公司据说要搞前后端分离,趁这两天项目完成的差不多,抓紧时间学习一下前端知识 现在流行前端项目工程化,那么第一个问题就是如何创建工程(项目),第一次玩webpack 通过 NPM 创建项目 # 创 ...

  10. spring源码学习之容器的扩展（一）

    在前面的章节,我们一直以BeanFactory接口以及它的默认实现XmlBeanFactory为例进行解析,但是,spring还提供了另一个接口ApplicationContext,用于扩展BeanF ...