优化页面响应速度，减少页面向服务端请求图片次数，有时候可能会将多个小图合并到一张图中，用的时候通过css控制显示的区域，比如：上传一张人物图片到服务器检测人脸，最后在页面上列出所有识别出来的人脸，实现方式有多种，一种是把识别出来的人脸截取成多张小图片，一种是把人脸的位置找出来，通过css样式来控制显示，可以用background-image、background-repeat、background-position三个属性实现，简单demo:

<div style="width:37px;height:46px;background:url(/960C9B29610F4B4BEFAFA75FBE51754B/1116685034_14432296608911n.jpg) no-repeat -717px -227px;"></div>

<div style="width:32px;height:43px;background:url(/960C9B29610F4B4BEFAFA75FBE51754B/1116685034_14432296608911n.jpg) no-repeat -198px -230px;"></div>

CSS控制图片显示区域的更多相关文章

  1. CSS控制图片和文字在同一行显示且对齐的3种方法

    CSS控制图片和文字在同一行显示且对齐的3种方法 在 HTML 代码中,有时会需要在文字旁边加上一个图标. 默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐. 常见方法 ...

  2. 用CSS控制图片大小显示的方法

    图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢? 可以通过按比例缩小或者放大到某尺寸(自己指定), ...

  3. FE: CSS固定图片显示大小及GitHub Pages在线演示

    CSS固定图片显示大小 分析 假设图片区域的大小固定为250×300px,那么我们可以写出如下的样式 .picture-area { width: 250px; height: 300px; marg ...

  4. css控制div显示／隐藏方法及２种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  5. CSS控制文字显示一行，超出显示省略号

    这几天在项目需求里面遇到了很多之前没做过的需求,也慢慢更加认识到了css的强大,是真的强大.以后会把自己技术调研的东西都写出来,哪怕只是一点点或者很小的点,重在学习. “CSS控制文字显示一行,超出显 ...

  6. CSS控制图片大小

    转载请注明来源:https://www.cnblogs.com/hookjc/ 1.CSS控制背景图片:    对于一个网页,我们开始设计的时候,可能没有过多的去想背景图到底是什么,因为大多都是设计背 ...

  7. JS控制图片显示的大小（图片等比例缩放）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 【JS控制图片显示的大小（图片等比例缩放）】

    效果: 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  9. css控制图片自适应大小

    相信大家做网页时经常会碰到大分辨率的图片会把表格涨破以致漂亮的网页面目全非,但只要使用以下的CSS语句即可解决.      该CSS的功能是:大于600的图片自动调整为600显示. <style ...

随机推荐

  1. 原理剖析-Netty之服务端启动工作原理分析(下)

    一.大致介绍 1.由于篇幅过长难以发布,所以本章节接着上一节来的,上一章节为[原理剖析(第 010 篇)Netty之服务端启动工作原理分析(上)]: 2.那么本章节就继续分析Netty的服务端启动,分 ...

  2. Android 面试收集录5 消息机制

    1.消息机制概述 1.1.消息机制的简介 在Android中使用消息机制,我们首先想到的就是Handler. 没错,Handler是Android消息机制的上层接口. Handler的使用过程很简单, ...

  3. issubclasss/type/isinstance/callable/super

    issubclass() : 方法用于判断第一个参数是否是第二个参数的子子孙孙类. 语法:issubclass(sub, super) 检查sub类是否是 super 类的派生类 class A: p ...

  4. 使用Yeoman自动构建Ember项目

    Yeoman是什么? Yeoman按照官方说法,它不只是一个工具,还是一个工作流.它其实包括了三个部分yo.grunt.bower,分别用于项目的启动.文件操作.包管理. Yo: Yo是一个项目初始化 ...

  5. FIFO页面淘汰算法

    1.优异虚拟存储系统,若进程在内存中占3页(开始时内存为空),若采用先进先出(FIFO)页面淘汰算法,当执行以下访问页号序列后1,3,4,2,1,3,5,1,2,5,4,2,会产生多少次缺页(9) 在 ...

  6. android的5个进程等级

    一.Foreground Process(前台进程,优先级别最高) 1.正处于 Activity Resume() 状态 2.正处于与 bound 服务交互的状态 3.正处于服务在前台运行的状态(st ...

  7. C/C++学习笔记--指针（Pointer）

    定义指针 一般类型: type_name  *  var_name; 例如: int _var = 1555; int * _var_addr=&_var; 一般类型数组类:type_name ...

  8. Jmeter微信小程序接口测试

    最近公司新项目组开发一款微信小程序电商平台,为了更好保证产品质量,因此提出了需要进行接口测试. 从接口本身来讲,对其测试与其他项目应该是一样的.所以不难理解,我们要对小程序的接口测试需要准备的 材料有 ...

  9. 你的第一个自动化测试：Selenium 自动化测试

    前言: 让你掌握自动化测试暂时脱离手工点点点,本章节让你掌握 Selenium 如何定位.判定.操作元素(实现业务逻辑) 一. 前期准备 1.准备以下工具 1.Selenium下载地址:立即下载 2. ...

  10. hnust 分蛋糕

    问题 B: 分蛋糕 时间限制: 1 Sec  内存限制: 128 MB提交: 2430  解决: 966[提交][状态][讨论版] 题目描述 今天是DK生日,由于DK的朋友很多,所以DK在蛋糕店定制了 ...