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()中,图片的地址可以是本地的地 ...
随机推荐
- 中间件增强框架之-CaptureFramework框架
一.背景 应用服务监控是智能运维系统的重要组成部分.在UAV系统中,中间件增强框架(MOF)探针提供了应用画像及性能数据收集等功能,其中数据收集功能主要采集四类数据:实时数据.画像数据.调用链接数据生 ...
- 携程 Apollo 配置中心传统 .NET 项目集成实践
官方文档存在的问题 可能由于 Apollo 配置中心的客户端源码一直处于更新中,导致其相关文档有些跟不上节奏,部分文档写的不规范,很容易给做对接的新手朋友造成误导. 比如,我在参考如下两个文档使用传统 ...
- WEB基础（一）--JSP的9个内置对象
1.request request 对象是 javax.servlet.httpServletRequest类型的对象. 该对象代表了客户端的请求信息,主要用于接受通过HTTP协议传送到服务器的数据. ...
- template.demo.js
<!DOCTYPE html><html><head> <title>index</title> <meta charset=&quo ...
- 机器学习tips
1 为什么随机梯度下降法能work? https://www.zhihu.com/question/27012077中回答者李文哲的解释 2 随机梯度下降法的好处? (1)加快训练速度(2)噪音可 ...
- Spring boot实战项目整合阿里云RocketMQ （非开源版）消息队列实现发送普通消息，延时消息 --附代码
一.为什么选择RocketMQ消息队列? 首先RocketMQ是阿里巴巴自研出来的,也已开源.其性能和稳定性从双11就能看出来,借用阿里的一句官方介绍:历年双 11 购物狂欢节零点千万级 TPS.万亿 ...
- 阿里、网易和腾讯面试题 C/C++
一.线程.锁 1.Posix Thread互斥锁 线程锁创建 a.静态创建 pthread_mutex_t mutex = PTHREAD_MUTEX_INITIALIZER; b.动态创建 pthr ...
- 欢迎加入我的知识星球：C语言解惑课堂
我在知识星球上开通了一个有关C语言基础答疑解惑的星球,它叫做:“C语言解惑课堂”.看这名字你就知道虽然有点俗,俗才贴近你的真正需求嘛!这是一个专门帮助C语言初学者答疑解惑的课堂.嗯~~~,关于这个星球 ...
- Seq[找规律]----2019 年百度之星·程序设计大赛 - 初赛一：1005
Seq Accepts: 1249 Submissions: 3956 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 ...
- pip安装时使用国内源，加快下载速度
国内源: 新版ubuntu要求使用https源,要注意. 清华:https://pypi.tuna.tsinghua.edu.cn/simple 阿里云:http://mirrors.aliyun.c ...