CSS 图片偏移技术以及坐标问题

2023-11-15

CSS中通过图片偏移技术可以实现将众多小图标放入一个图片中 ,网页加载时只需要加载一个图片即可实现得到众多小图标的功能。这是前端设计时候对图片的一种优化方式。

图片偏移技术只是一个属性而已,即:background-position: -100px -50px;  这个属性的第一个属性值是x轴的偏移量,第二个属性值是Y轴的偏移量

通过下面我自己编辑的一副图片来具体了解一下图片偏移技术的取值问题。 

将主图看成是一个坐标系,原点是左上角,坐标系的X轴正向是向右,Y轴的正向是向下,background-position中的值是通过移动图片来得到值得。

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

CSS 图片偏移技术以及坐标问题 的相关文章

  • 如何获得 calc() 函数的无单位结果

    我正在使用此计算来获取网页中的流体行高 line height calc 1 42em 1 55 1 42 100vw 300px 1080 300 数学是工作属性 除非我改变font size特定部分 因为line height应使用无单
  • 使用 CSS Grid,从任何地方滚动 div(不使用 jQuery 插件)

    div 怎样才能 scroll content https jsfiddle net blehmanade x1k3rhj7 33 可以从页面上的任何位置滚动吗 现在 scroll content仅当鼠标位于其上方时才可滚动 但是 当鼠标位
  • 如何使用 JavaScript 检测 CSS 变量支持?

    最新版本的 Firefox 支持CSS 变量 http www w3 org TR css variables 但 Chrome IE 和许多其他浏览器没有 应该可以访问 DOM 节点或编写一个小方法来返回浏览器是否支持此功能 但我还没有找
  • 伪元素和 SELECT 标签

    是否select标签允许使用 after选择器是为了在之后创建一个伪元素吗 我在 Mac 上尝试过 Chrome Safari 和 Firefox 但似乎不起作用 这是我使用过的折衷方案 http jsfiddle net pht9d295
  • 有没有办法改变输入类型=“日期”格式?

    默认情况下 输入type date 显示日期为YYYY MM DD 问题是 是否可以将其格式强制为 DD MM YYYY 无法更改格式 我们必须区分有线格式和浏览器的表示格式 接线格式 The HTML5日期输入规范 https www w
  • 如何防止 CFDocument 中的内容中间发生分页?

    我使用 cfdocument 标签从 html css 动态生成 PDF 文件 有些内容块我不想跨越多个页面 经过一番搜索后 我发现根据文档支持 page break inside 样式 然而 在我的测试中 声明 page break in
  • 如何在 font Awesome 图标链接下方添加添加文本?

    我正在尝试在我的 Blogger 模板中的 font awesome Icons 下添加一些文本 这是我想要实现的目标的图像 我想要实现的外观图片 https i stack imgur com BVYlh png 但到目前为止我已经做到了
  • 如何在CSS中制作一个带有边框的可调整大小的心形

    我想要制作一个心形 用户可以将其大小调整为任意宽度和高度 并且边框为 1 像素 我尝试了用纯 CSS 制作的心形 https stackoverflow com a 17386187 1404447 https stackoverflow
  • 引导行之间的垂直间距

    所以我正在研究布局 为了 响应能力 我决定使用 Bootstrap 现在我猜网格系统有问题 我想要的结果如下 1 4 2
  • HTML 元素的默认背景颜色是什么?白色还是透明?

    我只是被一个简单的问题困住了 想弄清楚 HTML 元素的默认背景颜色是什么 是白色的还是透明的 默认背景颜色是透明的 看这里 https developer mozilla org en docs Web CSS background co
  • 使用@font-face时浏览器下载什么字体

    font face 有点令人困惑 因为所有浏览器都无法决定使用哪种文件格式 下面是我目前正在使用的向网站添加 1 个新字体的方法 您可以看到有 4 个单独的字体文件 我知道每个文件都是因为某些浏览器支持不同的格式 但浏览器是下载所有文件还是
  • Internet Explorer 中的锯齿状按钮边缘

    如何去除 Internet Explorer 中宽按钮的锯齿状边缘 例如 您还可以通过设置来消除 Windows XP 的按钮样式 以及 Windows 的所有其他版本 background color and or border colo
  • 像在 tumblr 注册页面上那样鬼写

    有谁知道如何创建一个类似 tumblr 的字段 http www tumblr com http www tumblr com 这是一个 URL 字段 其中有一些褪色的文本 然后当您单击它并键入时 它会附加一些文本 tumblr com 您
  • 使用 jQuery 更改父元素样式

    我有下一个 html 设置 div class one div class two a href class three Click a div div 我想更改具有类的元素的背景颜色 one当我点击元素时 three使用 jQuery 这
  • 如何让Gmail像加载进度条一样

    我想在页面的中心和顶部创建一个像 Gmail 一样的加载进度条 并适用于所有浏览器 这是基本代码
  • 水平滚动的表格上的“粘性”标题......完全不可能?

    经过过去几个小时的研究后 我开始认为这是不可能的 即使在最新的浏览器上也是如此 HTML table具有水平滚动的元素 带有 粘性 thead在顶部 作为垂直滚动的周围网页的一部分 这是我的尝试 a height 100px backgro
  • 为什么此 TTF 字体在我的浏览器中无法使用?

    我下载了一种名为 Clunk 的 TTF 字体 并尝试将其应用于某些文本 这是我正在使用的代码 h1 Test h1 这似乎不起作用 Chrome 给了我两个错误 Failed to decode downloaded font path
  • 将按钮文本放在一行上

    我的按钮文本在 safari 中显示在一行上 即使在初次单击后 但是在 google chrome 上 当您第一次到达该按 钮时 我的按钮将显示在一行上 但是当您浏览更多帖子并再次遇到 加载更多 按钮时 文本搞砸了 这只发生在谷歌浏览器上
  • 如何简化这个 LESS CSS Box-shadow mixin? (带有“方向”的多个阴影)

    如何减少这段代码 可能使用循环 以拥有一个接受方向和数字的 函数 dir 想要的 方向 number 我需要多少次影子 这里是10次 color 阴影的颜色 Example 可以工作 但不是很容易使用 perspective box dir
  • 我可以使用 ASP.NET WebForms 母版页在每个内容页中包含不同的 javascript/css 文件吗?

    我有几个使用相同母版页的内容页 它们并不都需要包含在相同的 javascript 和 css 文件中 tag 是否可以更改内容来自内容页面的标签 确实如此 但我建议采取一些不同的做法 我在关闭正文标签的正上方放置了一个内容占位符 然后我填充

随机推荐

  • 实习需求-sessionStorage实现对话框只弹出一次

    文章目录 背景 实现思路 实现代码 背景 某功能页面下线 需要提供一个弹窗来提示用户该功能已下线 要求 弹窗只是在进入该页面的时候显示 切换其他的页面再回到该页面 弹窗不显示 即弹窗只在第一次点击该功能页面出现 实现思路 弹窗 elemen
  • QT实战——LCDNumber计数器

    需求 通过LCDNumber进行计数 间隔时间1s 可以重置 暂停 widget h ifndef WIDGET H define WIDGET H include
  • python自动点击小程序

    猜你感兴趣 使用Pyqt5玩转ChatGpt 内网文件共享服务 快速搭建私有pip镜像源 python设计模式 创建型模式 docker搭建私有git服务器 项目备份和迁移 redis持久化方案 被测点击界面 新建counter html添
  • 获取电商网站主图和详情图的浏览器插件

    介绍 搞图宝 专门获取各大电商平台详情页面主图和详情图的浏览器插件 现已支持京东 京东国际 淘宝 天猫 coupang 1688 naver gmarket alibaba 兰亭集势 谷歌浏览器下载地址 Google Chrome 网络浏览
  • SPI Flash芯片W25Q32英文版数据手册解读(一)---------引脚功能,工作模式

    W25Q32芯片是一个可以通过SPI 串行外围设备接口 操作的flash存储器 这篇文章备忘和总结一下英文版数据手册的一些解读 有关时序及具体用STC单片机编写程序的内容等下一篇文章 一 芯片引脚功能 我买的是8引脚 SOIC封装的芯片 如
  • MyBatis框架从入门到精通(一)MyBatis概述

    mybatis做为目前国内最为流行的开源orm框架 我们平时在使用时会感受到其带来的诸多便利 但是很少去深入分析 mybatis源码代码量不多 功能丰富 是一个很好的学习样例 本系列文章就和大家一起来学习mybatis框架 本系列笔记根据动
  • PSM+DID

    PSM DID 模型是由倾向得分匹配模型 Propensity Score Matching 以下简称 PSM 和双重差分模型 Differences in Differences 以下简称 DID 结合而成 其中 PSM 负责为受处理的个
  • python求解数字的平均值、方差、中位数

    定义数字输入函数 def getNum nums iNumStr input 请输入数字 回车退出 while iNumStr 当输入为空时 跳出循环 nums append eval iNumStr 在nums列表后加入输入的数字 iNu
  • 微信小程序审核代码提示wx.getLocation暂未配置在app.json中教你如何解决

    今天上传微信小程序代码时遇到的问题 解决方法 在app json里面进行配置 requiredPrivateInfos getLocation 查找官方API接口 原来是这样 我们再去微信公众平台官网 扫码进入我们的小程序服务 找到开发管理
  • 项目代码中参数的管理:mmcv中的Config包&argparse导入参数

    Config 当我们项目的超参数很多时 在文中设定和修改并不方便 这时我们需要项目中所有参数放入一个文件夹中 方便管理和修改 例如 config config py中包含了我们模型需要的所有参数 然后我们使用mmcv包中的Config函数对
  • Python实现链表

    文章目录 由一个等号引起的思考 链表 单链表 双链表 单向循环链表 由一个等号引起的思考 链表是由一个个被系统随机分配地址的结点们通过指针进行相连 以c 为例子 在写链表的时候可以使用结构体进行实现 struct node ElemType
  • 【vue2】实现查询功能及排序功能

    一 前言 之前写过一篇相关的文章 那个时候对于vue查询不甚了解 现在重新温习一次vue 有了新的认识 但是将新的也是通俗易懂的理解分享给大家 希望一起进步 二 业务场景 实现动态查询 输入框输入内容 然后列表根据输入框内容动态显示 截图
  • 思维导图TheBrain实用教程——如何选择主题并自定义主题颜色?

    TheBrain 您的终极数字记忆和无限思维导图软件 我们从一个想法跳到另一个想法 构建越来越复杂的网络 直到新想法形成 TheBrain允许你以同样的方式组织你的信息 而不限制你预先确定的文件结构 事实上 你的数字大脑是没有限制的 你可以
  • 如何开发一个App(Android)

    前言 本篇博客从开发的角度来介绍如何开发一个Android App 需要说明一点是 这里只是提供一个如何开发一个app的思路 并不会介绍很多技术上的细节 从整个大局去把握如何去构思一个app的开发 让你对独立开发一款app的时候有个理解 如
  • tia v15 添加项目_西门子S7-1500plc与S7-300plcPN/IO设备通信-创建项目

    西门子S7 1500plc与S7 300plcPN IO设备通信 PROFINET的CPU支持I device功能 即智能IO设备功能 也就是该PN设备可以同时作为IO控制器和IO设备 一个PN智能设备功能不但可以作为一个智能处理单元处理生
  • SpringSecurity连接数据库的使用

    一 简介 Spring 是非常流行和成功的 Java 应用开发框架 Spring Security 正是 Spring 家族中的成员 Spring Security 基于 Spring 框架 提供了一套 Web 应用安全性的完整解决方案 正
  • 【ASP.NET MVC系列】浅谈ASP.NET 页面之间传值的几种方式

    ASP NET MVC系列文章 01 浅谈Google Chrome浏览器 理论篇 02 浅谈Google Chrome浏览器 操作篇 上 03 浅谈Google Chrome浏览器 操作篇 下 04 浅谈ASP NET框架 05 浅谈AS
  • webpack-插件

    插件 Plugins 插件是 wepback 的支柱功能 webpack 自身也是构建于 你在 webpack 配置中用到的相同的插件系统之上 插件目的在于解决 loader 无法实现的其他事 剖析 webpack 插件是一个具有 appl
  • 操作系统实验:FCFS调度和SPF调度算法(C语言)

    实验内容 已知一组进程P1 P2 P3 及其到达时间和服务时间 参考下图 分别采用FCFS调度算法和SPF调度算法 求各个进程的完成时间 周转时间 带权周转时间 平均周转时间和平均带权周转时间 实验目的 熟悉FCFS调度算法的实现过程 熟练
  • CSS 图片偏移技术以及坐标问题

    CSS中通过图片偏移技术可以实现将众多小图标放入一个图片中 网页加载时只需要加载一个图片即可实现得到众多小图标的功能 这是前端设计时候对图片的一种优化方式 图片偏移技术只是一个属性而已 即 background position 100px