`

CSS Sprite介绍和基本说明

 
阅读更多

这篇文章已经改名字了,今天我将说名CSS Sprite的基本应用

 

CSS Sprite是CSS的基本技术之一,刚遇到的时候没什么感觉,但现在才发现其强大之处

 

参考

http://www.alistapart.com/articles/sprites


下面有常用标签
#panel1b a:hover {
    background: transparent url(test-3.jpg)
    0 -200px no-repeat;}

background 背景图
0 -200px 背景图相对位子
no-repeat 背景不重复显示(很重要)

这里我有个小窍门

图片左移 x轴为负
图片上移 y轴为负

记住哦


我在介绍一个小工具:SpriteMe

很强大的工具,具体怎么使用请查看官网
官网:



还有一些小例子:

巩固一下:

#web {
  width: 17px; height: 17px;
  background-repeat: no-repeat;
  background-image: url(../img/web.gif); /** sprite-ref: mysprite; */
}

#logo {
  width: 50px; height: 50px;
  background-repeat: no-repeat;
  background-position: top right;
  background-image: url(../img/logo.png); /** sprite-ref: mysprite; sprite-alignment: right */
}

#main-box {
  background-repeat: repeat-x;
  background-position: 5px left;
  background-image: url(../img/top-frame.gif); /** sprite-ref: mysprite; sprite-alignment: repeat;  
                                                                                 sprite-margin-top: 5px */
}
 
0
0
分享到:
评论

相关推荐

    简单的相册CSS模板-简单 相册 图片 Gallery.rar

    它包含了一个基本的CSS模板,可以有效地组织和展示图片,提供了一种直观的用户体验。在网页设计中,CSS(Cascading Style Sheets)是一种样式表语言,用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档的...

    HTML+CSS简单实现凡客商城静态网页

    HTML和CSS是构建网页的基本技术,本项目"HTML+CSS简单实现凡客商城静态网页"旨在通过这两门语言,模仿知名电商网站凡客诚品的界面设计,创建一系列静态页面,包括首页、商品列表页、商品详情页、用户登录与注册、...

    纯CSS3实现月光下飞舞的美丽精灵动画效果源码.zip

    【标题与描述解析】 标题"纯CSS3实现月光下飞舞的美丽精灵动画效果源码.zip"揭示了这是一个利用CSS3...开发者需要对CSS3的动画、精灵图以及JavaScript的基本知识有深入了解,才能理解和复现这个月光下的精灵舞蹈效果。

    施工企业官网CSS模板是一款适合企业公司类网站模板下载 .rar

    用户应当首先阅读此文件,了解模板的基本用法和可能的限制。 使用施工企业官网CSS模板,企业可以快速地搭建出符合品牌形象的网站,无需从零开始设计。但需要注意的是,虽然模板提供了便捷,但也可能因为与其他网站...

    SpriteSheetPacker:一个简单的工具,可将给定目录中的所有图像打包成单个图形,可选择生成足够的 CSS 以在 HTML 中使用精灵表

    Cyotek Spriter 快速包装一个简单的工具,您... 如果未指定,则不会生成 CSS class - 基本 CSS 类名称。 如果/css未设置,则忽略如您所见,这是一件非常简单的事情! 笔记! 该工具将在没有提示的情况下覆盖输出文件

    网站特效代码

    总之,"网站特效代码"涉及到前端开发的多个方面,包括HTML、CSS、JavaScript的基本语法和高级特性,以及如何利用这些技术创造动态、引人入胜的用户体验。掌握这些知识点,对于一个网站开发者来说至关重要。

    网页开发的常用示例集合

    在实际开发中,为了优化性能和提高可访问性,开发者会结合使用字体图标服务、CSS Sprite技术,或者利用data URI scheme直接在CSS中嵌入图片数据。这样既能减少HTTP请求,又能确保用户在没有加载到外部资源的情况下也...

    带引导动画超酷的装饰工程有限公司网站源代码

    总的来说,这个资源适合那些想要创建独特、引人入胜的装饰工程公司网站的开发者,他们需要具备HTML、CSS和JavaScript的基本知识,以及可能的后端开发和服务器管理经验。通过学习和修改这个源代码,开发者可以提升...

    Portfolio_HTML_CSS

    这个目录可能包含HTML文件(如index.html)、CSS文件(如style.css)、JavaScript文件(用于添加交互性)、图片和其他资源,以及可能的项目说明文档或示例代码。 在这个项目中,开发者可能会学习以下HTML和CSS的...

    网站前端网页源码模板 (1190).zip

    总的来说,这个压缩包包含了一个基本的前端网页结构,涵盖了HTML、CSS和JavaScript的核心概念,以及图片管理和响应式设计的原则。开发者可以通过学习和使用这个模板,快速构建自己的网站或提升前端技能。

    music-app-display-with-htmlcss

    这个项目重点在于理解和应用CSS技术,以实现吸引人的视觉效果和用户界面。以下是对相关知识点的详细说明: 1. HTML基础结构:HTML(HyperText Markup Language)是网页内容的基石,负责定义页面的结构。在这个音乐...

    cocos2d-x-0.7.2 api说明

    0.7.2版本是其早期的一个迭代,尽管较新版本在功能和性能上可能有显著提升,但了解早期版本的API对于理解cocos2d-x的发展历程和基本原理至关重要。 1. **API文档结构** 提供的文件如`annotated.html`、`classes....

    7_days_7_projects:这个项目包括学习 html 和 css 将每天 7 天一个不同的项目

    7. **日7:网页布局优化** - 学习如何利用CSS预处理器(如Sass或Less)和雪碧图(Sprite Sheets)进行性能优化,提高加载速度。 在这个过程中,你不仅会学习到HTML和CSS的基本语法,还会接触到实际开发中的一些最佳...

    粒子旋转形成文字Canvas特效.zip

    4. **数学计算**:计算粒子的运动轨迹和旋转角度需要用到一些基本的数学知识,例如三角函数、向量运算等,以实现粒子的平滑移动和旋转。 5. **事件监听**:可能需要监听用户交互,如鼠标移动或触摸事件,以便根据...

    【JavaScript源代码】CocosCreator实现技能冷却效果.docx

    在CocosCreator中实现技能冷却效果,主要涉及的是游戏逻辑编程和UI交互设计。通过JavaScript(TypeScript)脚本控制精灵...这个过程展示了游戏开发中的基本逻辑控制、UI反馈和用户交互设计,是游戏开发中的常见实践。

    基于PixiJS实现超炫背景特效.zip

    在压缩包中的"基于PixiJS实现超炫背景特效"文件中,你可能找到了示例代码、图片资源和说明文档。通过学习和分析这些资源,你将能掌握如何使用PixiJS与其他技术协同工作,创造出令人震撼的前端背景特效。记得实践是...

    cperry957.github.io:我们正在开发的TD游戏

    此外,为了优化性能,他们可能还会考虑使用CSS sprite技术减少HTTP请求,或者利用CSS变量和媒体查询实现响应式设计,让游戏在不同设备上都有良好的显示效果。 总之,"cperry957.github.io"的TD游戏项目展示了CSS在...

    tdy.rar_javascript

    3. 利用CSS精灵(Sprite)技术:将原图和倒影合并成一张大图,然后通过JavaScript动态调整CSS的背景位置来显示倒影。这种方法适用于静态倒影,且图片大小可能较大。 4. 创建两个相同图片元素,一个正常显示,另一个...

    html5疯狂打企鹅微信小游戏代码.zip

    - **资源加载和优化**:如何有效地加载和管理图像资源,如使用精灵表(Sprite Sheets)和懒加载技术,对于减少游戏启动时间和提高性能至关重要。 - **游戏逻辑和算法**:游戏的规则、计分系统、难度设置等都需要...

Global site tag (gtag.js) - Google Analytics