上节课中我们学习了背景图像，这节课我们学习背景图像的高级知识，如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. 第四节 Python基础之数据类型（集合）

    在学习本节之前,我们先对数据类型做一个补充,也就是数据类型的分类: 按照可变和不可变来分: 可变:列表,字典 不可变:数字,字符串,元组 按照访问顺序来分: 顺序访问:字符串,列表,元组 映射的方式访 ...

  2. UML 资料整理

    参考:http://www.uml.org.cn/oobject/201211231.asp 一.类的属性的表示方式 在UML类图中,类使用包含类名.属性(field) 和方法(method) 且带有 ...

  3. OpenCV中feature2D——BFMatcher和FlannBasedMatcher

    作者:holybin 原文:https://blog.csdn.net/holybin/article/details/40926315 Brute Force匹配和FLANN匹配是opencv二维特 ...

  4. hive 的map数和reduce如何确定（转）

    转自博客:https://blog.csdn.net/u013385925/article/details/78245011(没找到原创者,该博客也是转发)   一.    控制hive任务中的map ...

  5. nginx1.14.0版本server、location、rewrite配置

    server配置demo 在192.168.10.140(centos7)上修改: /home/program/nginx/conf/nginx.conf 添加一个server server { li ...

  6. MySql 的SQL执行计划查看，判断是否走索引

    在select窗口中,执行以下语句: set profiling =1; -- 打开profile分析工具show variables like '%profil%'; -- 查看是否生效show p ...

  7. 如何启用小米手机5c的ROOT权限

    小米手机5c怎么样开通了root超级权限?大家都知道,android设备有root超级权限,一旦手机开通了root相关权限,能够实现更强大的功能,举个例子大家部门的营销部门的同事,使用某些营销应用都需 ...

  8. 7.11 animals.c 程序

    7.11 animals.c 程序 #include <stdio.h> #include <ctype.h> int main(void) { char ch; printf ...

  9. [UE4]线性插值Lerp

  10. 三、CSS样式——列表

    概念: CSS列表属性允许你放置.改变列表标志,或者将图像作为列表项标志 属性 描述 list-style 简写列表项 list-style-image 列表项图像 list-style-positi ...