当前位置: 首页 > news >正文

精灵图(十八课)

一、精灵图的作用

减少服务器的接受和发送用户请求的次数,提高页面加载效率

二、精灵图的使用

什么是精灵图:就是把很多个小的背景图片,集合在一张大的背景图片上

实现方法:通过对大的背景图片的位置定位来实现,即background-position

                  默认位置为大背景图片的左上角

ps:位置坐标移动时,x轴往右走为正值,y轴往下走为正值

代码:

   <style>.box1 {width: 25px;height: 25px;margin: 20px auto;/* background-color: pink; */background: url(./sprites.png) -60px no-repeat;}.box2 {width: 25px;height: 25px;margin: 50px auto;/* background-color: pink; */background: url(./sprites.png) -60px -35px no-repeat;}</style>
</head><body><div class="box1"></div><div class="box2"></div>
</body>

           

代码:

    <style>span {display: inline-block;}.M {width: 180px;height: 160px;/* background-color: pink; */background: url(./name.png) -135px;}.G {width: 155px;height: 160px;/* background-color: pink; */background: url(./name.png) -115px -160px;}</style>
<body><span class="M">M</span><span class="G">G</span>
</body>


http://www.mrgr.cn/news/75158.html

相关文章:

  • 供应SW6301V单C口多协议升降压移动电源IC
  • Docker 篇-Docker 详细安装、了解和使用 Docker 核心功能(数据卷、自定义镜像 Dockerfile、网络)
  • SIwave:释放 SIwizard 求解器的强大功能
  • LLMs之Code:Github Spark的简介、安装和使用方法、案例应用之详细攻略
  • FastGPT部署通义千问Qwen和智谱glm模型|OneAPI配置免费的第三方API
  • sqoop import将Oracle数据加载至hive,数据量变少,只能导入一个mapper的数据量
  • RHCE web解析、dns配置、firewalld配置实验
  • 人工智能技术的发展历程和现状
  • 基于Spring Boot+Vue的多媒体素材管理系统的设计与实现
  • 多模态Embedding不愧是CVPR和NIPS的共同选择!这发文思路真的需要好好学习一下!
  • c语言学习16按键控制流水灯
  • 闯关leetcode——3178. Find the Child Who Has the Ball After K Seconds
  • docker安装到D盘
  • 游戏引擎学习第11天
  • 易考八股文之代理模式在AOP中如何应用?
  • Gartner发布XDR扩展检测和响应市场指南:XDR需要具备的19项功能
  • 逆向攻防世界CTF系列31-elrond32
  • 代码随想录算法训练营第46天 | 647. 回文子串、516.最长回文子序列
  • curl 安装最新版
  • 如何在手机上完整下载B站视频并保存到相册?
  • 制造业数字化转型路线图,终于有人捋清楚了
  • 用哈希表封装myunordered_map/_set--C++
  • 《Python网络安全项目实战》项目5 编写网站扫描程序
  • 20241113下载安装虚拟桌面工具VYSOR并连接中科创达的高通CM6125开发板
  • 深入理解ECDSA:椭圆曲线数字签名算法的原理与应用
  • 算法基础 -- 红黑树原理与插入伪代码