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

    今天我们讲spark streaming的应用,这个是实时处理的,类似于Storm以及Flink相关的知识点, 说来也巧,今天的自己也去听了关于Flink的相关的讲座,可惜自己没有听得特别清楚,好像是 ...

  2. 大话目标检测经典模型（RCNN、Fast RCNN、Faster RCNN）

      目标检测是深度学习的一个重要应用,就是在图片中要将里面的物体识别出来,并标出物体的位置,一般需要经过两个步骤:1.分类,识别物体是什么 2.定位,找出物体在哪里 除了对单个物体进行检测,还要能支持 ...

  3. Android面试收集录10 LruCache原理解析

    一.Android中的缓存策略 一般来说,缓存策略主要包含缓存的添加.获取和删除这三类操作.如何添加和获取缓存这个比较好理解,那么为什么还要删除缓存呢?这是因为不管是内存缓存还是硬盘缓存,它们的缓存大 ...

  4. CentOS7配置图形界面及设置vnc远程连接、windows远程桌面连接

    安装CentOS桌面 yum groupinstall "GNOME Desktop" 重启,进入终端,将启动模式变更为图形模式 systemctl set-default gra ...

  5. Android如何实现毛玻璃效果之Android高级模糊技术

    自从iOS系统引入了Blur效果,也就是所谓的毛玻璃.模糊化效果,磨砂效果,各大系统就开始竞相模仿,这是怎样的一个效果呢,我们先来看一下,如下面的图片: 效果我们知道了,如何在Android中实现呢, ...

  6. ScrollView中ViewPager无法正常滑动问题

    本文主要介绍如何解决ViewPager在ScrollView中滑动经常失效.无法正常滑动问题. 解决方法只需要在接近水平滚动时ScrollView不处理事件而交由其子View(即这里的ViewPage ...

  7. js限制文本框只能输入特定字符

    限制只能输入数字 // ---------------------------------------------------------------------- // <summary> ...

  8. Git上手：使用Tortoisegit操作Git

    在工作中,为了提高git使用效率,更多会采用git图形化工具来操作git.(特殊情况下才使用git命令行操作git) git自带的图形化工具界面不够友好,就选择第三方git图形化工具,市面上第三方gi ...

  9. IOS与Unity交互

    学习了宣雨松的两篇Unity和IOS交互的文章,自己动手做了下,遇到了些问题,在此记录 先说IOS发送消息给Unity:(文章地址:http://www.xuanyusong.com/archives ...

  10. 孤荷凌寒自学python第十三天python代码的外部模块引用与基本赋值语句

    孤荷凌寒自学python第十三天python代码的外部模块引用与基本赋值语句 (完整学习过程屏幕记录视频地址在文末,手写笔记在文末) 从结构化编程流行以来,代码便被分块存储,称之为模块或库. 在pyt ...