优化页面响应速度，减少页面向服务端请求图片次数，有时候可能会将多个小图合并到一张图中，用的时候通过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. Oozie wordcount实战

    一.定义 基本概念 Action: An execution/computation task (Map-Reduce job, Pig job, a shell command). It can a ...

  2. 使用CSS3制作各种形状

    CSS3的一个非常酷的特性是允许我们创建各种规则和不规则形状的图形,从而可以减少图片的使用.以前只能在Photoshop等图像编辑软件中制作的复杂图形现在使用CSS3就可以完成了.通过使用新的CSS属 ...

  3. android 文件保存

    将数据保存在外部存储器上 /* Checks if external storage is available for read and write */ public boolean isExter ...

  4. jQuery监控动画执行完毕事件

    $('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend' ...

  5. DOS程序员手册（二）

    2．6存储设备     随着DOS的升级,磁盘存储容量也有了很大扩充.表2.4介绍了软盘容量的增加以     及所支持驱动器型号的数量.                                 ...

  6. Python运算符及逻辑运算

    基本运算符 运算符用于执行程序代码运算,会针对一个以上操作数项目来进行运算.例如:2+3,其操作数是2和3,而运算符则是“+”.在计算器语言中运算符大致可以分为5种类型:算术运算符.连接运算符.关系运 ...

  7. springboot02 Thymeleaf

    一.http协议 1. 什么是协议? 协议是交易双方共同遵守的一种约定,比如: 租房协议 , 购买协议.... 2. 什么是http协议? HTTP协议是Hyper Text Transfer Pro ...

  8. 深入理解CSS中的margin

    1.css margin可以改变容器的尺寸 元素尺寸 可视尺寸--标准盒子模型中盒子的宽度是不包括margin值的,clientWidth 占据尺寸--包括margin的宽度 outWidth不在标准 ...

  9. NYOJ36 水池数目

    水池数目 时间限制:3000 ms  |  内存限制:65535 KB 难度:4   描述 南阳理工学院校园里有一些小河和一些湖泊,现在,我们把它们通一看成水池,假设有一张我们学校的某处的地图,这个地 ...

  10. atom下python好用的几个插件

    atom下python好用的几个插件 atom-beautify 代码优化 atom-python-run 运行 autocomplete-python 代码补全 file-icons 图标优化 hi ...