CSS Sprite + 背景大小:覆盖

2024-03-27

有没有办法使用背景尺寸:封面在加载了 CSS Sprite 的图像上?示例代码:

[class*='img-sprite-']{
   background-image:url('../images/sprite/img.png');
   background-repeat:no-repeat;
   display:block
}

.img-sprite-a1{background-position:-5px 5px}
.img-sprite-a2{background-position:-10px 10px}
.img-sprite-a3{background-position:-15px 15px}
...

您需要根据图像中的精灵数量使用 % 作为背景大小和背景位置:

下面的示例包含 3 个精灵图像:(第一个 div 可以调整大小来玩并查看精灵拉伸)

  div {
  resize: both;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAAAyCAMAAACJUtIoAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpFNDI3Q0MzNjFEN0RFNzExQUQwMzhERDMyREMwRDFBOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo2Njg5QjY3NjdEMUQxMUU3OTExOEI2N0ZGOTY1NzY2OCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2Njg5QjY3NTdEMUQxMUU3OTExOEI2N0ZGOTY1NzY2OCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU0MjdDQzM2MUQ3REU3MTFBRDAzOEREMzJEQzBEMUE5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU0MjdDQzM2MUQ3REU3MTFBRDAzOEREMzJEQzBEMUE5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+h3SaNAAAAAZQTFRFKCgo////2hH7kgAAAAJ0Uk5T/wDltzBKAAABGklEQVR42uzZSxKEIBAD0PT9Lz27WVjaJOkGKZU1GR4y8hOxZcFzWfiXtgDytNIEK2MCyOOyahyhAsjjumqU4QLI44ZqEOICyNOOqsOFPMqxpNRZABSL/v8eK5GduexYyhJfqxi3wj7vhKXNQocqKitIljw5xsfalGX8/gJWuCxMZHndNlMsy26gcwxra2J1DNU1scYSd6jtO4jKw/L2WwZLG0Jvd/oYln36wQqWfoqb+iaiMOzzWOhdrZpZ9ol8DsvdCF011MPyVbuyzltqYVVU81gl1dtYNdUsVo/qJSzj2mHBLG8dwcaLdReLvnk7vxFrZkFlkdVrLDSxYktW86YZOou8yV/POsZCOflMLpVvPjeWj6WUnwADAPW9F+6UuMBmAAAAAElFTkSuQmCC) orange no-repeat;
  color: white;
  padding: 2em;
}

.demo {
  min-height: 50px;
  background-size: 300% 90%;
  background-position: 50% 0;
  display: inline-block;
  overflow: scroll;
<div class="demo">resize me</div>
<div>my sprite</div>

连续 3 个精灵使background-size: 300% 100%;水平显示三分之一。

如果精灵按行设置,则执行以下操作background-size: 100% 300%;,

如果精灵是 3 行 3 列,那么background-size: 300% 300%;

等等。

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

CSS Sprite + 背景大小:覆盖 的相关文章

  • 是否可以使“HTML 到语音”与“文本到语音”相同?

    我有一个奇怪的要求 在我现有的应用程序中我有Text2Speech为此 我使用了AVSpeechSynthesizer 到语音文本 但现在要求发生了变化 现在我需要将 HTML 文件数据转换为文本 例如HTML2Speech 我们可以想到的
  • 如何解决此错误:属性 rel 的原始源值错误

    我正在尝试使用 w3c 验证我的网站 但出现错误 Bad value original source for attribute rel on element link The string original source is not a
  • 如何设置视频文件的预览,从输入类型='文件'中选择

    在我的模块之一中 我需要从 input type file 浏览视频 之后我需要在开始上传之前显示选定的视频 我使用基本的 HTML 标签来显示 但它不起作用 这是代码 document on change file multi video
  • 无法正确显示行

    我应该在这个问题的开头说我完全没有 html css javascript 背景 所以请对我宽容点 如果我使用了错误的术语或者问了一个愚蠢的问题 没有提供足够的信息 请抱歉 我正在尝试让一个可扩展的表工作 通过阅读论坛线程 教程 将 nex
  • save_and_open_page 已停止提供我的 CSS

    我的测试设置工作得很好 每当我打电话时 都能提供正确格式的 css 页面save and open page从测试中 然后 我设置了一些 javascript 测试 并对我的设置进行了一些更改 抱歉 我无法详细说明所有内容 我没有足够详细地
  • 多语言标记验证器

    是否有免费的在线多语言标记验证服务可以正确识别和验证多语言标记 我确实找到了totalvalidator和htmlvalidator 但这些是 付费 非基于网络的解决方案 Use http validator w3 org nu http
  • VBA 完成 Internet 表单

    我正在寻找将 Excel 中的值放入网页的代码 Sub FillInternetForm Dim IE As Object Set IE CreateObject InternetExplorer Application IE naviga
  • 网站在 iPhone 屏幕右侧显示空白区域

    我遇到问题http eiglaw com http eiglaw com iPhone 屏幕右侧显示约 25 像素宽的空白 边框 我在 stackoverflow 上研究了这个问题 这些帖子是相关的 但是当我尝试提供的各种解决方案时 我无法
  • 如何在其他div id的悬停中使用div显示块

    如何打开div悬停时标记href tag 这是我在悬停 href 标签上显示 div 标签的代码 Services is id of href tag Services is id of div tag Service hover Serv
  • CSS 继承、别名和其他很酷的东西

    有一天 我随机浏览网页 发现了一些程序 可以让你编写 CSS 别名和其他很酷的东西 我现在不记得了 举个例子 我记得你可以这样做 myclass background color red greenfont 其中 greenfont 在其他
  • 转义 h 轮廓

    因此 我一直在尝试找出在被较低级别的标题吸引后添加内容的最佳方法是什么 section h1 Title of Section h1 h2 Related 1 h2 h2 Related 2 h2 p I NEED THIS TO BE P
  • 删除 IE9 边缘周围的 2px 灰色边框

    我正在尝试对这个网站进行编码 尝试关键字 并且我正在尝试找出如何删除这个阴影2px灰色边框延伸到 IE9 窗口的内部 至少顶部 左侧和底部 我的边距设置为零 因此所有页面元素都到达页面的最边缘 但使用 IE9 它们会停在这个灰色边框处 我没
  • javascript 选择自定义光标 (svg)

    我正在动态地将光标更改为悬停时的本地 svg element on mouseover function this css cursor url svgs pointer svg 9 30 auto 工作正常 但我想选择该 svg 来操纵其
  • 合并 2 个大型 CSS 文件的有效方法

    我正在寻找一个可以合并 2 个大型 CSS 文件的工具 到目前为止我尝试过的所有方法 例如CSSMerge 都没有成功 其中一些只是随机删除属性 其他人则因 webkit 和 moz 等非标准属性而窒息 并给我错误 我还需要保留每条规则大小
  • 如何使用角度材料在具有可扩展行的表格中创建嵌套垫表

    我有以下数据 id c9d5ab1a subdomain wing domain aircraft part id c9d5ab1a info mimetype application json info dependent parent
  • 如何在模态打开时防止主体滚动

    我在用着W3schools 模态脚本 https www w3schools com howto tryit asp filename tryhow css modal我想添加一个功能 防止模型打开时整个主体滚动 我根据我的需要对原始脚本做
  • 使用 Javascript 设置 cookie [重复]

    这个问题在这里已经有答案了 我正在尝试构建我的第一个移动应用程序 它需要连接到我的 mysql 数据库并使用 json 返回数据 这很好 目前我有一个登录系统 一旦确定用户名和密码存在 它就会返回一条成功消息 对于下一步 我想在我的页面上使
  • 使用 CSS 的响应式图像

    我发现调整图像大小以使其具有响应能力很棘手 我正在开发一个 php 应用程序来自动将网站转换为响应式版本 我有点被图像困住了 我已经成功地为网站上的每个图像添加了一个包装类 并且可以很好地调整图像的大小 我的问题在于自然小于窗口的图像 例如
  • 如何使用 JavaScript 或 jQuery 克隆 HTML 元素的样式对象?

    我正在尝试克隆元素的样式对象 这应该允许我在更改后重置所述元素的样式 例如 el style left 50px curr style left 50px Modify the elements style The cloned style
  • Webpack 4:如何使用 LESS 获取 CSS 源映射?

    多年来我一直在尝试让 CSS 源映射在 webpack 中工作 但没有成功 我不确定链条中哪里出了问题 我希望有人能指出我正确的方向 这是发生的事情 行号是错误的 实际上文件名也是错误的 main less只是包含一堆 import也就是说

随机推荐

  • 为什么 R 有时会停止显示输出?

    有时 R 会停止显示输出 我输入数字 1 然后按回车键 但什么也没有出现 这种情况是在我按下窗口中的 停止 图标后发生的 该图标用于停止长时间的计算 我在 Mac 上使用 R 2 11 0 按 STOP 是否会导致 R 停止显示输出 如何让
  • 使用 C# 比较嵌套对象属性

    我有一个方法可以比较两个对象并返回所有不同属性名称的列表 public static IList
  • 在 Java 中使用嵌套枚举类型

    我心中有一个涉及嵌套枚举的数据结构 这样我就可以执行如下操作 Drink COFFEE getGroupName Drink COFFEE COLUMBIAN getLabel 如果有方法声明 someMethod Drink type s
  • 从js数组中删除双引号

    我有这种类型的数组 80 529299450867271 7 3884550841172976 80 528953669541707 7 3875715810979612 80 528714422417153 7 3867339810469
  • 使用rvest,如何从submit_form()返回的对象中提取html内容

    我正在尝试从 pems dot ca gov 下载一些流量数据 如下这个话题 https stackoverflow com questions 28418770 using rvest or httr to log in to non s
  • Api 网关:用于 Lambda 集成的 AWS 子域

    我正在尝试将我的 lambda 函数与 API 网关集成 该函数必须异步运行 因为它需要太长时间 我相信我必须选择 AWS 服务 并指定 Lambda 而不是选择 Lambda 集成类型 例如 this http docs aws amaz
  • callgrind:如何检查一行是否执行

    是否可以使用 callgrind 产生像 gcov lcov 给出的输出一样的输出 我正在阅读他们的文档 无法找到 callgrind annotate 的确切选项 这是不可能的 但 callgrind annotate 或 kcacheg
  • Web API 项目在部署时不会运行 - 无法加载文件或程序集“Newtonsoft.Json,版本=4.5.0.0”

    当我部署 MVC 5 WEB API 项目时 我不断收到此错误 无法加载文件或程序集 Newtonsoft Json 版本 4 5 0 0 Culture neutral PublicKeyToken 30ad4fe6b2a6aeed 或其
  • Jquery 并将事件绑定到 iframe

    我目前正在使用 jquery textselect 插件根据页面上任何位置的选择文本来触发警报 并且它可以很好地执行以下操作 document ready function document bind textselect function
  • cron 作业替代品?

    我正在安装 Boonex 的 Dolphin 7 它要求我设置一个每 1 分钟运行一次的 cron 作业 然而 我的托管提供商允许我至少每 30 分钟运行一次 crons 我使用过 CMS 它有一个替代品 一个替代 cron 的脚本 有没有
  • Winforms 组件的父级/所有者[重复]

    这个问题在这里已经有答案了 从嵌入表单中的自定义 Winforms 组件中 如何获取父 所有者控件 我有一个 IContainer 并且 Site 属性不为空 但我不知道如何到达 真正的 父级 这是后续这个问题 https stackove
  • MongoDb:如果不存在,则将元素添加到数组[重复]

    这个问题在这里已经有答案了 我正在使用 node js 和 Mongodb 我是新使用 Mongod 的 我有一个这样的文档 Tag name string videoIDs array 这个想法是 服务器接收一个像这样的 JSON JSO
  • FOR /F 命令循环中的错误级别返回意外结果

    我正在尝试记录输出net stop同时还捕捉其ERRORLEVEL 基于这个问题 https stackoverflow com questions 3088712 我在嵌套子例程中尝试了以下操作 set a loopIndex 0 for
  • 如何在基于 php 的系统中的同一页面上显示登录错误消息?

    我正在构建一个基于 php 的登录系统 用户需要输入用户名和密码才能登录 我的问题是 如何在同一页面上显示 无效的用户名或密码 错误消息 我尝试了很多事情 包括尝试使用查询字符串 error 1 它确实通过在同一页面上显示错误消息来解决我的
  • 如何在python中读取Mat v7.3文件?

    我正在尝试阅读以下网站中给出的mat文件 ufldl stanford edu housenumbers 在文件train tar gz中 有一个名为digitStruct mat的mat文件 当我使用 scipy io 读取 mat 文件
  • 在 NetBeans 中禁用“保存快照”

    如何在 NetBeans 7 1 2 中禁用保存快照 它大大减慢了系统速度 有什么建议 这些快照是 IDE 检测到缓慢行为时拍摄的性能快照 由于显而易见的原因 速度较慢的计算机更有可能触发收集 通过花费比预设时间更长的时间来完成任务 然后需
  • 使用 Python 备份 Postgresql 数据库

    我想使用Python代码备份数据库 我想备份一些相关数据的表 如何备份以及如何使用 SELECT 语句选择所需的表 e g 我想获取一些表从 2014 05 01 到 2014 05 10 的数据 并将结果输出为 sql 扩展文件 如何使用
  • 从标头自动生成 C 代码

    我想生成头文件中定义的过程的空实现 理想情况下 它们应该为指针返回 NULL 为整数返回 0 等 并且在理想的情况下 还可以打印到 stderr 调用了哪个函数 这样做的动机是需要实现一个包装器 将复杂的现有 API 头文件 的子集适配到另
  • 适用于 i18n 的 FuelPHP ORM 数据库架构,意见/建议

    虽然这个问题可能是similar https stackoverflow com questions 929410 what are best practices for multi language database design to
  • CSS Sprite + 背景大小:覆盖

    有没有办法使用背景尺寸 封面在加载了 CSS Sprite 的图像上 示例代码 class img sprite background image url images sprite img png background repeat no