CSS 图像高级 Css Sprites
上节课中我们学习了背景图像,这节课我们学习背景图像的高级知识,如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
>
<
div
class
=
"one"
></
div
>
<
div
class
=
"two"
></
div
>
</
body
>
</
html
>
background-position 属性有两个值,第一值表示水平位置,正值表示往前,负值表示往后。第二个表示垂直位置,正值表示往上,负值表示往下。
background-position 属性值需要慢慢调整,细心+耐心就能做好。
盒子大小背景图像大小可以调整。这里我们使用默认的大小。
计算结果GIF动画:
CSS 图像高级 Css Sprites的更多相关文章
- CSS 图像高级 CSS 渐变
CSS 渐变 CSS 渐变是在 CSS3 Image Module 中新增加的 <image> 类型. 使用 CSS 渐变可以在两种颜色间制造出平滑的渐变效果.用渐变代替图片,可以加快页面 ...
- CSS 图像高级 径向渐变
径向渐变 径向渐变使用 radial-gradient 函数语法. 这个语法和线性渐变很类似, 可以指定渐变结束时的形状 以及它的大小. 默认来说,结束形状是一个椭圆形并且和容器的大小比例保持一致. ...
- CSS Sprites (CSS图像拼合技术)教程工具
什么是CSS Sprites? “Sprite”(精灵)这个词在计算机图形学中有它独特的定义,由于游戏.视频等画质越来越高,必须有一种技术可以智能的处理材质和贴图,并且要 同时保持画面流畅.“Spri ...
- CSS Sprites(CSS图像拼合技术)教程、工具集合
本集合是有一位国外设计师收集整合,并由 oncoding翻译成中文的,感谢他们的辛苦贡献.CSS Sprites技术在国外并不是什么新技术,只不过近两年(尤其08年开始)中国开始流行这个词,大家也开始 ...
- 《精通CSS:高级Web标准解决方案》学习笔记(上)
鉴于国产CSS书籍基本都是辣鸡的现状,我在半年前动用某工作室的购书资金采购了一些技术书籍,这本广受好评的<精通CSS>也在其中.但是在阅读过后我深深的感觉到,如果说CSS本来已经是一种很琐 ...
- css 图像热区
CSS图像热区 在img标签当中,存在一个属性usemap属性,用来和map标签进行绑定,从而实现图像热区.所谓的图像热区,其实指的是在图像中插入一个连接,当用户点击图像的指定区域后就会进行页面跳转. ...
- CSS 图像居中对齐
CSS 图像居中对齐 我们在<CSS 内外边距>学过内容居中,它的原理是将外边左右设置为auto.图像居中也是这个原理. 示例 <!DOCTYPE html> <htm ...
- CSS 图像大小
CSS 图像大小 虽然在HTML中,img标签有属性height.width设置高和宽,在工作中却使用得非常少,通常使用CSS来控制大小. 给盒子设置属性height.width限制大小.单位通常是像 ...
- CSS 图像
CSS 图像 <上一节下一节> 通过CSS可以控制图像的大小和对齐方式. 图像大小 虽然在HTML中,img标签有属性height.width设置高和宽,在工作中却使用得非常少,通常使用C ...
随机推荐
- bootloader介绍
Bootloader是系统加电后运行的第一段软件代码,主要任务就是将内核映像从硬盘读到RAM中,然后跳转到内核的入口点去运行,也即开始启动操作系统. 简单的说,Bootloader就是在操作系统运行内 ...
- 无需脑图 无需思维导图 看Word大纲视图
大纲视图可以帮助我们大纲视图可帮助您管理文档的结构和标题,就像现在的脑图,经过我的使用后,可以说Word的分级功能非常强大,只恨当时理解的不够,误会了Word. 当我们决定写一个文档的时候,第一步 ...
- Ubuntu16.04主题美化
系统更新 sudo apt-get update sudo apt-get upgrade # 卸载libreOffice libreoffice是ubuntu自带的开源office软件,体验效果不如 ...
- sqlserver 中NOLOCK、HOLDLOCK、UPDLOCK、TABLOCK、TABLOCKX
https://www.cnblogs.com/sthinker/p/5922967.html
- mybatis逆向工程没有报错,但是也没有pojo和Mapper文件问题
如果你使用的逆向工程是自己手写上去的配置文件,那么错误的范围就太大了.如果是你导入以前使用过的逆向工程,那么没有生成文件很可能是使用的操作系统不同. 原因:逆向工程中的路径问题,windows和mac ...
- postgis创建空间数据库,导入shp数据
使用向数据库中导入数据
- ubuntu 14.04解决wifi连接不稳定问题
问题描述:开机后wifi功能可以使用,一段时间后无法上网,重启后正常. 三种方法: 一 将/etc/ppp/options 文件第232行中的 cp-echo-failure 4 改为 lcp-ech ...
- spring boot apollo demo
controller 监听器,监听配置实时变化 src/main/resources---->META-INF---->app.properties apollo 界面 测试访问 : 实时 ...
- Spark启动报错|java.io.FileNotFoundException: File does not exist: hdfs://hadoop101:9000/directory
at org.apache.spark.deploy.history.FsHistoryProvider.<init>(FsHistoryProvider.scala:) at org.a ...
- requests https 错误
HTTPS请求进行SSL验证或忽略SSL验证才能请求成功,忽略方式为 verify=False