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 + 背景大小:覆盖 的相关文章

随机推荐

  • 为什么 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