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

    #! /bin/sh PROJ=`find . -name '*.xib' -o -name '*.[mh]'` for png in ` find . -name '*.png'` do name ...

  2. CSS系列(5)-如何使用Firebug查看网页的html和css

    Firebug是火狐浏览器Firefox的一个插件,专门为开发人员开发的.使用Firebug需要先在Firefox中安装这个插件,网上有很多教程,可以对照着安装一下. 不同的火狐浏览器版本中的Fire ...

  3. 【vim环境配置】在centos6.4上配置vim的一些零碎记录

    上一篇日志已经step by step地实录了如何在本机mac上配置vim开发环境已经各种插件. 有了一定经验之后,开始在实验室远程server上centos6.4的环境下配置vim环境. 这台机器是 ...

  4. BFC相关知识

    一.什么是BFC css布局主要采用盒子模型(BOX),元素的类型和 display 属性,决定了 Box 的类型,常见的盒子类型有两种: block-level box:display 属性为 bl ...

  5. Android 环境变量设置

    需要设置以下全局的环境变量 ANDROID_HOME: C:\Users\bellesun\AppData\Local\Android\sdk JAVA_HOME: C:\Program Files ...

  6. App自动化测试前期准备---android SDK配置

    说明:就是配置android SDK 一.sdk下载 Windows(X64):立即下载 Linux(X64):立即下载 二.Windows配置 1.解压文件 直接解压到指定目录(演示目录:D:/) ...

  7. ASP.NET Core 2.1 源码学习之 Options[2]:IOptions 【转】

    原文链接:https://www.cnblogs.com/RainingNight/p/strongly-typed-options-ioptions-in-asp-net-core.html 在 上 ...

  8. python学习_循环结构 and 类型判断

    # 循环结构 ### 循环结构(while) - 格式 ```python while 表达式: 语句块 ``` > 执行流程:当程序执行到while语句时,首先判断表达式的真假.若表达式的值为 ...

  9. OZ customize windows iamge

    1.之前通过修改auto文件和windows.py文件可实现自动安装OS,但是disk bus只能以IDE模式启动,进入系统自动下载运行bat文件,安装cloudbase-init和qga,及清理日志 ...

  10. win10 ubuntu16双系统安装教程

    一． 知识准备 1.材料 前提: 本文档是在win10 64位下进行安装的!32位的安装注意其中的一些细节即可 硬件: X86_64 位电脑 硬盘有 40G 空闲 软件:[百度搜索即可] (1) Ul ...