上节课中我们学习了背景图像，这节课我们学习背景图像的高级知识，如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. Oracle数据csv导入

    打开工具,在tool下面有个Text Importer 先选择Data from textfile选项卡 然后选择 Open data file ,打开要导入的文件 1\ 2\ 再先选择Data to ...

  2. NanoPC-T4/RK3399开发板Ubuntu FriendlyCore系统开机自动运行客户程序

    RK3399开机自动运行客户程序 比如hellohello.c 交叉编译:aarch64-linux-gcc hello.c -o hello使用SecureCRT软件通过串口下载到开发板rz修改文件 ...

  3. Winform 界面执行耗时操作--UI卡顿假死问题

    UI卡顿假死问题 误区1:使用不同的线程操作UI控件和耗时操作(即,跨线程操作UI控件CheckForIllegalCrossThreadCalls = false;), 注意:此处只是为了记录... ...

  4. 简简单单美化你Mac os x的终端配色

    Mac OS x虽然是以图形界面出名的,但是作为一个类Unix系统,还是离不开终端(shell)的,尤其是对于开发人员来说,Mac OS x默认状态的终端给人的感觉总是不那么舒服,所以很有必要对它进行 ...

  5. Solr使用访问地址控制索引的，删除、创建

    启动Solr,删除全部索引数据: http://localhost:8080/solr/update/?stream.body=<delete><query>*:*</q ...

  6. Redis配置不当致使root被提权漏洞

    Redis配置不当致使root被提权漏洞 Dear all~ 最近Redis服务被曝出因配置不当,可能造成数据库被恶意清空,或被黑客利用写入后门文件造成进一步入侵,请关注! 一.漏洞发布日期 2015 ...

  7. CleanMyMac X教程之-安装卸载

    Mac清理软件CleanMyMac X的出现成功的吸引了Mac用户的注意,CleanMyMac X是2018年发布的,深受许多Mac用户的青睐.windows操作端有360等众多清洁软件,那么Mac端 ...

  8. myeclipse2018安装教程（附下载地址）

    这两天在网上找myeclipse2018的安装包和破解工具,很分散,并且破解失败很多,现在总结下 myeclipse2018下载地址: https://pan.baidu.com/s/1NV7cAsN ...

  9. Python对wav文件的重采样

    例如从2channel,4.41k hz 重采样到 1 channel,16k hz def downsampleWav(src, dst, inrate=44100, outrate=16000, ...

  10. VB.net中合并word中的表格

    软帝国产品的互兼容性使得我们采用vb.net编程语言操作Microsoft Word文档变得相当容易.针对本文的主题,网络上已经有很多大牛博客做了详细的介绍,基本的我就不再赘述,只是自己在做项目的时候 ...