background-position: -192px -48px;//图片定位详解

2023-11-08

<style>
    .test1{
        background-image: url("./glyphicons-halflings.png");  //设置背景图(大图)
        width: 16px;//设置要显示图片宽度
        height: 16px;//设置要显示图片高度
        background-position: -192px -48px;//图片定位,在图片当中取负值,以左上角为中心原点
    }
    .test2{
        background-image: url("./glyphicons-halflings.png");
        width: 16px;
        height: 16px;
        background-position: -264px -144px;
    }
    .test3{
        background-image: url("./glyphicons-halflings.png");
        width: 16px;
        height: 16px;
        background-position: -96px -144px;
    }
</style>
<div class="test1">
</div>
<div class="test2">
</div>
<div class="test3">
</div>

b2d36a192f4ca03d52ca5aa88ced4d15589.jpg

最终效果图6441c11d7457a735dbd854dd24993dc68a8.jpg

量图软件 Mark Man

 

转载于:https://my.oschina.net/u/3277156/blog/1835631

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

background-position: -192px -48px;//图片定位详解 的相关文章

随机推荐

  • MFC之标签控件26

    1 标签控件 1 先创建基于对话框的项目 2 添加TabControl控件到对话框 3 由于这个标签控件是唯一需要添加额外代码的 所以我们需要添加额外的代码进去项目当中 TabSheet h if defined AFX TABSHEET
  • windows下配置gtest及实例

    1 安装gtest 2 配置工程 3 进行单元测试 1 安装gtest 将gtest压缩文件下载放到指定位置 进行解压缩 可看到如下结果 安装源码 https github com smarr googletest 2 配置工程 将gtes
  • resa复现

    源代码 https github com ZJULearning resa 1 数据集准备 参考Ultra Fast Lane Detection 复现 2 环境搭建 conda create n resa python 3 8 y con
  • Appium环境搭建之Android SDK及模拟器的下载配置

    一 Android SDK下载及配置 1 访问https www androiddevtools cn 下载Android SDK 提供有exe和zip两种格式下载 2 下载zip压缩包 直接解压至想要安装的路径 3 然后就双击 SDK M
  • UE-c++ TSubclassOf

    TSubclassOf 是提供UClass类型安全性的模板类 例如您在创建一个投射物类 允许设计者指定伤害类型 您可只创建一个UClass类型的UPROPERTY 让设计者指定派生自UDamageType的类 或者您可使用TSubclass
  • 1.1.4 Qt信号槽之再谈Qt4与Qt5中信号槽使用的差异

    Qt信号槽之再谈Qt4与Qt5中信号槽使用的差异 Differences between String Based and Functor Based Connections 通过上面的示例和分析 我们已经明显感受到Qt4和Qt5中conn
  • GSEA

    软件下载网址 GSEA gsea msigdb org GSEA不需要设置阈值过滤基因 有助于我们从整体通路分析差异 一 数据准备 1 数据集 tpm bulk gct 你需要分析的表达矩阵 建议bulk数据用tpm标准化后的 第一行 1
  • Flutter常用插件和对.yaml讲解

    目录 一 对Flutter项目中的pubspec yaml 进行讲解 二 Flutter 常用插件 1 时间选择器 2 toast 3 RxDart 类似RxJava 和RxSwift 4 本地存储 保存 和Android sp 一样 5
  • leetcode 63 不同路径II

    题目 一个机器人位于一个 m x n 网格的左上角 起始点在下图中标记为 Start 机器人每次只能向下或者向右移动一步 机器人试图达到网格的右下角 在下图中标记为 Finish 现在考虑网格中有障碍物 那么从左上角到右下角将会有多少条不同
  • wedo2.0编程模块介绍_福特福克斯TCM重新编程操作

    适用范围 支持车型 年款 新福克斯 2011 2018 1 6L 2 0L DPS6变速箱 车型 嘉年华 2013 1 5L DPS6变速箱 车型 翼博 2013 2016 1 5L DPS6变速箱 车型 功能介绍 升级ECU版本或者对空白
  • DGA域名检测的数据分析与深度学习分类

    一 引言 在恶意软件发展的初期 恶意软件编写者会直接将控制服务器的域名或IP直接写在恶意软件中 即使是现在也会有恶意软件遵从这种方式 笔者部署的蜜罐捕获的僵尸网络样本中 很多经过逆向之后发现也是直接将IP写在软件中 对于这种通信的方式 安全
  • PCL 点云边界提取

    边界提取 一 算法原理 1 算法概述 2 详细流程 3 参考文献 二 代码实现 三 结果展示 一 算法原理 1 算法概述 基于法线实现点云边界提取 pcl BoundaryEstimation 2 详细流程 3D点云的边缘点往往位于最外围
  • 指定版本安装selenium(python)

    怎样指定selenium 卸载selenium pip uninstall selenium 指定版本安装selenium pip install selenium 3 3 1
  • PyQt(Python+Qt)学习随笔:windows下使用pyinstaller将PyQt文件打包成exe可执行文件

    专栏 Python基础教程目录 专栏 使用PyQt开发图形界面Python应用 专栏 PyQt入门学习 老猿Python博文目录 在 windows下使用pyinstaller将多个目录的Python文件打包成exe可执行文件 介绍了可以使
  • chatgpt赋能python:看Python代码的App:提高你的编程技能

    看Python代码的App 提高你的编程技能 Python作为一门流行的编程语言 使用者越来越多 如果你是一名初学者或是有多年的编程经验的工程师 你可能会遇到需要查看Python代码的情况 为了满足这一需求 近年来出现了一些看Python代
  • 如何用cmd查看文件内容的MD5值

    certutil hashfile 文件名称 文件类型 MD5 如 certutil hashfile 123 MP3 MD5
  • 常用函数整理(基础篇)

    目录 strcpy 返回值 strcat Parameters 返回值 例 strncpy Parameters 返回值 例 strncat Parameters 返回值 例 strncmp Parameters 返回值 例 strstr
  • 精灵图与遮罩层的使用方法

    一 精灵图 精灵图的使用步骤 第一步 先测量精灵图局部的大小 设置为盒子的宽度和高度 第二部 测量精灵图局部的坐标值 设置为背景定位的负值 宽 width 20px 高 height 20px 精灵图局部定位值 84px 366px 二 遮
  • monkey命令

    monkey是adb调试工具中的一个命令 用于android设备的稳定性测试 主要是为了测试app会不会出现crash和anr 以及出现的时间和次数 adb shell monkey命令 可以查看命令所能携带的参数 crash 程序崩溃或闪
  • background-position: -192px -48px;//图片定位详解

    2019独角兽企业重金招聘Python工程师标准 gt gt gt