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()中,图片的地址可以是本地的地 ...
随机推荐
- Mobile game forensics
My friend Carrie'd like to know "Garena 传说对决" violates any mobile risks such as insecure d ...
- JAVA面向对象面试题带答案（墙裂推荐）
1) 在Java中,如果父类中的某些方法不包含任何逻辑,并且需要有子类重写,应该使用(c)关键字来申明父类的这些方法. a) Finalc b) Static c) Abstract d) Void2 ...
- win10和浏览器快捷键
1. Win10快捷键[Win+↑/↓/←/→] 将当前窗口按比例固定到屏幕的四个边角,如左上.右上.左下.右下.[Win+1/2/3…] 按顺序打开任务栏上的已固定程序(不包括第一个“任务视图”按钮 ...
- elk系列教程：docker中安装配置elk
elasticSearch Docker安装elasticsearch: docker pull docker.io/elasticsearch:7.2.0 启动: docker run -p 920 ...
- 洛谷 P3628 [APIO2010]特别行动队
题意简述 将n个士兵分为若干组,每组连续,编号为i的士兵战斗力为xi 若i~j士兵为一组,该组初始战斗力为\( s = \sum\limits_{k = i}^{j}xk \),实际战斗力\(a * ...
- Redis的高可用(HA)
本文参考 [https://www.jianshu.com/p/501c9c3b1b36] [https://www.jianshu.com/p/3b9054d3894b] 八大特性 1.速度快 正常 ...
- Django+Vue前后端分离项目的部署
部署静态文件: 静态文件有两种方式 1:通过django路由访问 2:通过nginx直接访问 方式1: 需要在根目录的URL文件中增加 url(r'^$', TemplateView.as_view( ...
- HBase 系列（二）—— HBase 系统架构及数据结构
一.基本概念 一个典型的 Hbase Table 表如下: 1.1 Row Key (行键) Row Key 是用来检索记录的主键.想要访问 HBase Table 中的数据,只有以下三种方式: 通过 ...
- js设置，取得，清除cookie
//取得cookie function getCookie(name) { var nameEQ = name + "="; var ca = document.cookie. ...
- c++智能指针介绍
C++11标准引入了boost库中的智能指针,给C++开发时的内存管理提供了极大的方便.接下来这篇文件介绍shared_ptr/weak_ptr内部实现原理及使用细节. C++不像java有内存回收机 ...