上节课中我们学习了背景图像，这节课我们学习背景图像的高级知识，如Css Sprites，CSS 背景渐变等。

Css Sprites

Css Sprites，国内也叫CSS精灵。它的原理是将许多的小图片整合到一张大图片中，利用css中的background-image属性，background-position属性定位某个图片位置，来达到在大图片中引用某个部位的小图片的效果。

我们需要Sprites图片，可以在网上下载，可以叫美工做些，可以在线生成。这里推荐一个在线生成的网站。https://www.toptal.com/developers/css/sprite-generator

我们使用的图片是这个样子~~

下面的代码展示两个div，开始它们有背景图片，当光标悬停时切换到另一张图片。

<!DOCTYPE html>
<html>
    <head>
        <title>CSS Sprites</title>
        <style type="text/css">
            div{
                width:76px;
                height:76px;
                background: url(https://www.liyongzhen.com/docs/images/sprit.png);
                background-repeat:no-repeat;
                display: inline-block;
            }  
            div.one{
                background-position:0px 0px
            }
            div.one:hover{
                background-position:0px -76px
            }
            div.two{
                background-position:-76px 0px
            }
            div.two:hover{
                background-position:-76px -76px
            }          
        </style>
    </head>
    <body>
        <h1>软件开发，成就梦想</h1>
        <h2>学编程，上利永贞网 https://www.liyongzhen.com/</h2>
        <div class="one"></div>
        <div class="two"></div>
    </body>
</html>
 

background-position 属性有两个值，第一值表示水平位置，正值表示往前，负值表示往后。第二个表示垂直位置，正值表示往上，负值表示往下。

background-position 属性值需要慢慢调整，细心+耐心就能做好。

盒子大小背景图像大小可以调整。这里我们使用默认的大小。

计算结果GIF动画：

CSS 图像高级 Css Sprites的更多相关文章

  1. CSS 图像高级 CSS 渐变

    CSS 渐变 CSS 渐变是在 CSS3 Image Module 中新增加的 <image> 类型. 使用 CSS 渐变可以在两种颜色间制造出平滑的渐变效果.用渐变代替图片,可以加快页面 ...

  2. CSS 图像高级 径向渐变

    径向渐变 径向渐变使用 radial-gradient 函数语法. 这个语法和线性渐变很类似, 可以指定渐变结束时的形状 以及它的大小. 默认来说,结束形状是一个椭圆形并且和容器的大小比例保持一致. ...

  3. CSS Sprites (CSS图像拼合技术)教程工具

    什么是CSS Sprites? “Sprite”(精灵)这个词在计算机图形学中有它独特的定义,由于游戏.视频等画质越来越高,必须有一种技术可以智能的处理材质和贴图,并且要 同时保持画面流畅.“Spri ...

  4. CSS Sprites(CSS图像拼合技术)教程、工具集合

    本集合是有一位国外设计师收集整合,并由 oncoding翻译成中文的,感谢他们的辛苦贡献.CSS Sprites技术在国外并不是什么新技术,只不过近两年(尤其08年开始)中国开始流行这个词,大家也开始 ...

  5. 《精通CSS：高级Web标准解决方案》学习笔记（上）

    鉴于国产CSS书籍基本都是辣鸡的现状,我在半年前动用某工作室的购书资金采购了一些技术书籍,这本广受好评的<精通CSS>也在其中.但是在阅读过后我深深的感觉到,如果说CSS本来已经是一种很琐 ...

  6. css 图像热区

    CSS图像热区 在img标签当中,存在一个属性usemap属性,用来和map标签进行绑定,从而实现图像热区.所谓的图像热区,其实指的是在图像中插入一个连接,当用户点击图像的指定区域后就会进行页面跳转. ...

  7. CSS 图像居中对齐

    CSS  图像居中对齐 我们在<CSS 内外边距>学过内容居中,它的原理是将外边左右设置为auto.图像居中也是这个原理. 示例 <!DOCTYPE html> <htm ...

  8. CSS 图像大小

    CSS 图像大小 虽然在HTML中,img标签有属性height.width设置高和宽,在工作中却使用得非常少,通常使用CSS来控制大小. 给盒子设置属性height.width限制大小.单位通常是像 ...

  9. CSS 图像

    CSS 图像 <上一节下一节> 通过CSS可以控制图像的大小和对齐方式. 图像大小 虽然在HTML中,img标签有属性height.width设置高和宽,在工作中却使用得非常少,通常使用C ...

随机推荐

  1. MongoDB Sharding分片 shell 脚本

    #!/bin/sh CONFIG_NAME=$ CONFIG_PORT=$ SERIAL_NUM=$ STORAGE_HOME=$ if [ ! -n "$CONFIG_NAME" ...

  2. JSP学习1---创建一个简单的jsp程序

    一.新建一个“Dynamic Web Project”动态Web项目 1.1输入项目名称 Project1,在Dynamic Web module version(动态Web模块版本),选择3.0(注 ...

  3. 工控随笔_10_西门子_WinCC的VBS脚本_01_基础入门

    很多人都认为VB语言或者VBS脚本语言是一种很low的语言,从心里看不起VB或者VBS, 但是其实VBS不仅可以做为系统管理员的利器,同样在工控领域VBS语言大有用武之地. 西门子的WinCC提供了两 ...

  4. cplusplus标准库

    http://www.cplusplus.com/reference/   Standard C++ Library reference C Library The elements of the C ...

  5. javase高级

    静态代理:需要代理对象和目标对象实现一样的接口.同一个接口,一个目标类实现,一个代理类实现,代理类除了目标类的方法还有别的增强方法优点:可以在不修改目标对象的前提下扩展目标对象的功能.缺点:1冗余.由 ...

  6. java.util.concurrent包下并发锁的特点与适用场景

    序号 类 备注 核心代码 适用场景 1 synchronized 同步锁 并发锁加在方法级别上,如果是单例class对象,则只能允许一个线程进入public synchronized void doX ...

  7. 未来-区块链-Micron：区块链永远不会忘记：内存对这项革命性技术的推动作用

    ylbtech-未来-区块链-Micron:区块链永远不会忘记:内存对这项革命性技术的推动作用 1.返回顶部 1. 俗话说,大象永远不会忘记.区块链亦是如此. 内存是区块链的核心,它是一种以关键方式构 ...

  8. 通过c++11的condition_variable实现的有最大缓存限制的队列

    之前曾写过一个通过C++11的condition_variable实现的有最大缓存限制的队列,底层使用std::queue来实现,如果想要提升性能的话,可以考虑改用固定的长度环形数组.环形数组实现如下 ...

  9. 2018-2019-2 20165312《网络攻防技术》Exp3 免杀原理与实践

    2018-2019-2 20165312<网络攻防技术>Exp3 免杀原理与实践 课上知识点总结 1.恶意软件检测机制 基于特征码的检测(需要定期更新病毒库) 启发式恶意软件检测(实时监控 ...

  10. 新手必备|常见30种NLP任务的练手项目（文末福利）

    1.分词 Word Segmentationchqiwang/convseg ,基于CNN做中文分词,提供数据和代码. 2.词预测 Word PredictionKyubyong/word_predi ...