HTML连载35-背景图片的练习、精灵图
一、背景图片练习
解释：这个例子需要注意的是，我们背景图片嵌套到另一个图片之中。我们设计的注意点在于，怎么定位到我们想定位到的地方。
总结：背景图片就是一块一块的，我们想把块的位置定位好（一般就是宽和高的相等），然后再对图片在“块”中进行位置调整就可以了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>d101_background_image_exercise</title>
<style>
.box1{
width: 1600px;
height: 900px;
background-image: url("image/scratch_fish.jpg");
background-position: center center;
}
.box2{
width: 1600px;
height: 500px;
background-image: url("image/buyudaren.jpg");
background-position: center center;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
二、精灵图
1.什么是CSS精灵图
CSS精灵图是一种图像合成技术
2.CSS精灵图的作用
可以减少请求的次数，以及降低服务器的压力
3.如何使用CSS精灵图
CSS精灵图需要配合背景图片精确定位
要使用到dreamware正在安装，下次更新再进行演示
三、源码：
d101_background_image_exercise.html
地址:
https://github.com/ruigege66/HTML_learning/blob/master/d101_background_image_exercise.html
2.CSDN：https://blog.csdn.net/weixin_44630050（心悦君兮君不知-睿）
3.博客园：https://www.cnblogs.com/ruigege0000/
4.欢迎关注微信公众号：傅里叶变换，后台回复“礼包”获取Java大数据学习视频礼包
HTML连载35-背景图片的练习、精灵图的更多相关文章
- 盒子总结,文本属性操作,reset操作,高级选择器,高级选择器优先级,边界圆角(了解),a标签的四大伪类,背景图片操作,背景图片之精灵图
盒子总结 ''' block: 设置宽高 1.没有设置宽,宽自适应父级的宽(子级的border+padding+width=父级的width) 2.没有设置高,高由内容撑开 设置了宽高 一定采用设置的 ...
- HTML连载34-背景关联和缩写以及插图图片和背景图片的区别
一.背景属性缩写的格式 1.backgound:背景颜色 背景图片 平铺方式 关联方式 定位方式 2.注意点: 这里的所有值都可以省略,但是至少需要一个 3.什么是背景关联方式 默认情况下,背 ...
- HTML连载32-背景颜色、背景图片、背景填充
一.背景 1.如何设置标签的背景颜色 (1)在CSS中有一个background-color:属性值:,就是专门用来设置标签的背景颜色. (2)取值:具体单词.RGB.RGBA.十六进制 例子: &l ...
- 移动端（视口(meta)，像素比，二倍图(图片，背景图，精灵图)，css初始化(normalize.css)，特殊样式，常见屏幕尺寸）
1. 视口:(布局视口(layout viewport),视觉视口(visual viewport),理想视口(ideal viewport)) meta 视口标签 <meta name = ...
- iOS关于UILabel 基本属性 背景图片 背景色
[代码] iOS关于UILabel 基本属性 背景图片 背景色 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 ...
- BaseAdapter使listview设置不同背景图片并添加selector
前段时间为了实现根据item不同的内容实现不同的背景色google了好久只找到了个隔行换色,通过自定义SimpleAdapter终于实现了此功能,但是定义了selector并没有触发点击效果.今天重新 ...
- CSS——精灵图与背景图片定位
精灵图产生背景: 1.网页上的每张图像都需要向服务器发送一次请求才能展现给用户.2.网页上的图像过多时,服务器就会频繁地接受和发送请求,大大降低页面的加载速度.为了有效地减少服务器接受和发送请求的次数 ...
- CSS入门（背景各种属性的详解、垂直居中和过渡效果的详解、渐变效果的简单讲解、雪碧图和精灵图）
一.各种背景属性 1.background-image 属性为元素设置背景图像. 元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距. 默认地,背景图像位于元素的左上角,并在水平和垂直方 ...
- CSS背景和精灵图
如何设置背景图片? 1.在CSS中有个叫做background-image:url():的属性,就是专门用于设置背景图片的. 2.注意点: 1)图片的地址必须放在url()中,图片的地址可以是本地的地 ...
随机推荐
- 自定义ItemToggleView
极力推荐文章:欢迎收藏 Android 干货分享 阅读五分钟,每日十点,和您一起终身学习,这里是程序员Android 本篇文章主要介绍 Android 开发中的部分知识点,通过阅读本篇文章,您将收获以 ...
- table 表格 细边框 最简单样式
table 表格细边框的效果实现方法虽然不难,但网上简单有效的方法却很少,在此记录一下 css 样式 /** table 细边框 **/ table{border-collapse: collapse ...
- Spring文档学习
Spring文档学习 参考Spring Framework Documentation学习 1. IoC 容器 1.1 容器实例化 <beans> <import resource= ...
- 【数据结构学习】关于HashMap的那些事儿
涉及数据结构 红黑树 链表 哈希 从CRUD说起 预热知识: DEFAULT_INITIAL_CAPACITY = 1 << 4, HashMap默认容量为16(n << m意 ...
- AWS Aurora数据库 Multi-Master 小测
AWS Aurora Mysql终于推出了Multi-Master,直面硬刚Oracle RAC.在多一份数据库产品选择的小兴奋之余,我们也看看新推出的Multi-Master的特点(包括优缺点). ...
- C#使用代理IP发送请求
https://www.cnblogs.com/benbenfishfish/p/5830149.html 获取可代理的IP https://www.cnblogs.com/ShalenChe/p ...
- java并发编程（三）----线程的同步
在现实开发中,我们或多或少的都经历过这样的情景:某一个变量被多个用户并发式的访问并修改,如何保证该变量在并发过程中对每一个用户的正确性呢?今天我们来聊聊线程同步的概念. 一般来说,程序并行化是为了获得 ...
- java并发编程（一）----线程基础知识
在任何的生产环境中我们都不可逃避并发这个问题,多线程作为并发问题的技术支持让我们不得不去了解.这一块知识就像一个大蛋糕一样等着我们去分享,抱着学习的心态,记录下自己对并发的认识. 1.线程的状态: 线 ...
- JavaScript的垃圾回收机制与内存泄漏
常用的两种算法: 引用计数(新版浏览器已弃用,弃用原因:会出现循环引用的情况,无法进行垃圾回收,导致内存泄漏) 标记清除 引用计数法 引用计数,顾名思义一个对象是否有指向它的引用,即看栈中是否有指向要 ...
- Git安装与使用（windows环境）（一）----Git安装、生成公钥和私钥、添加SSH
安装 1.从官网下载git:http://git-scm.com/downloads 2.安装git,选择git组件安装,如下图 3.一直next,直到出现下面的窗口.这里是选择命令行形式.(可以理解 ...