优化页面响应速度，减少页面向服务端请求图片次数，有时候可能会将多个小图合并到一张图中，用的时候通过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. 平时收集的一些有关UED的团队和个人博客

    平时收集的一些有关UED的团队和个人博客 前端团队阿里巴巴 UED -- 我们设计的界面,并没有几十亿的流量,但每天来自上百个国家的百万商人在使用着.阿里巴巴中国站UED -- 阿里巴巴中国站UED成 ...

  2. 嵌入式（Embedded System）笔记 —— Cortex-M3 Introduction and Basics（上）

    随着课内的学习,我想把每节课所学记录下来,以作查阅.以饲读者.由于我所上的是英文班课程,因此我将把关键术语的英文给出,甚至有些内容直接使用英文. 本次所介绍内容是关于Cortex-M3的基础内容. - ...

  3. ubuntu下eclipse 安装记录

    基本是参考:http://www.metsky.com/archives/611.html 完成. 中间遇到小问题,在此记录下,方便遇到同样问题的难友. 先说下快速打开命令行快捷键:Ctrl+Alt+ ...

  4. 每天一个Linux命令（11）：cat命令

    cat命令连接文件并打印到标准输出设备上. 注意:当文件较大时,文本在屏幕上迅速闪过(滚屏),用户往往看不清所显示的内容.因此,一般用more等命令分屏显示.为了控制滚屏,可以按Ctrl+S键,停止滚 ...

  5. css 之 border-radius属性

    css中给盒子设置圆角可以通过 border-radius 属性来实现(具体原理就不深入探讨了); 在开发过程中都会遇到浏览器兼容问题,这问题其实也不难解决,无非就是加上私有前缀,在这里先忽略掉.   ...

  6. ironic baremetal node status

    参考: https://docs.openstack.org/ironic/latest/contributor/states.html https://docs.openstack.org/iron ...

  7. ssh.sh_for_centos

    #!/bin/bash sed -i 's/#PermitRootLogin yes/PermitRootLogin yes/g' /etc/ssh/sshd_config sed -i 's/#Us ...

  8. 课时5：闲聊之Python的数据类型

    目录: 一.引言 二.数据类型 >整型 >浮点型 >布尔类型 三.类型转换 四.获得关于类型的信息 五.课时05课后习题及答案 *********** 一.引言 ********** ...

  9. Java Web Action DAO Service层次理解

    参考来源:http://blog.csdn.net/inter_peng/article/details/41021727 1. Action/Service/DAO简介: Action是管理业务(S ...

  10. gulp入门1

    1. 下载.安装git(https://git-scm.com/downloads),学会使用命令行. 2. 下载.安装node.js(https://nodejs.org/en/),现在node.j ...