一、背景图片练习

解释：这个例子需要注意的是，我们背景图片嵌套到另一个图片之中。我们设计的注意点在于，怎么定位到我们想定位到的地方。

总结：背景图片就是一块一块的，我们想把块的位置定位好（一般就是宽和高的相等），然后再对图片在“块”中进行位置调整就可以了

<!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-背景图片的练习、精灵图的更多相关文章

  1. 盒子总结,文本属性操作,reset操作,高级选择器,高级选择器优先级,边界圆角(了解),a标签的四大伪类,背景图片操作,背景图片之精灵图

    盒子总结 ''' block: 设置宽高 1.没有设置宽,宽自适应父级的宽(子级的border+padding+width=父级的width) 2.没有设置高,高由内容撑开 设置了宽高 一定采用设置的 ...

  2. HTML连载34-背景关联和缩写以及插图图片和背景图片的区别

    一.背景属性缩写的格式 1.backgound:背景颜色  背景图片  平铺方式  关联方式  定位方式 2.注意点: 这里的所有值都可以省略,但是至少需要一个 3.什么是背景关联方式 默认情况下,背 ...

  3. HTML连载32-背景颜色、背景图片、背景填充

    一.背景 1.如何设置标签的背景颜色 (1)在CSS中有一个background-color:属性值:,就是专门用来设置标签的背景颜色. (2)取值:具体单词.RGB.RGBA.十六进制 例子: &l ...

  4. 移动端（视口(meta)，像素比，二倍图(图片，背景图，精灵图)，css初始化(normalize.css)，特殊样式，常见屏幕尺寸）

    1. 视口:(布局视口(layout viewport),视觉视口(visual viewport),理想视口(ideal viewport)) meta 视口标签 <meta  name = ...

  5. 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 ...

  6. BaseAdapter使listview设置不同背景图片并添加selector

    前段时间为了实现根据item不同的内容实现不同的背景色google了好久只找到了个隔行换色,通过自定义SimpleAdapter终于实现了此功能,但是定义了selector并没有触发点击效果.今天重新 ...

  7. CSS——精灵图与背景图片定位

    精灵图产生背景: 1.网页上的每张图像都需要向服务器发送一次请求才能展现给用户.2.网页上的图像过多时,服务器就会频繁地接受和发送请求,大大降低页面的加载速度.为了有效地减少服务器接受和发送请求的次数 ...

  8. CSS入门（背景各种属性的详解、垂直居中和过渡效果的详解、渐变效果的简单讲解、雪碧图和精灵图）

    一.各种背景属性 1.background-image 属性为元素设置背景图像. 元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距. 默认地,背景图像位于元素的左上角,并在水平和垂直方 ...

  9. CSS背景和精灵图

    如何设置背景图片? 1.在CSS中有个叫做background-image:url():的属性,就是专门用于设置背景图片的. 2.注意点: 1)图片的地址必须放在url()中,图片的地址可以是本地的地 ...

随机推荐

  1. python编写环境(种类)

    python编写环境(种类) 官方推荐 cpython 转成C的字节码 jython转成Java的字节码 ironpython转成C#字节码 pypy转换成动态编译 开发快,运行快

  2. redis高可用之DNS篇

    1.  背景 例如,存在一套redis主从(主从节点在不同的主机上),应用程序通过主库的ip进行读写操作. 但是,主库一旦出现故障,虽然有从库,且从库提升为主库,但是应用程序如果想使用从库则必须修改配 ...

  3. python 闭包，装饰器，random，os，sys，shutil，shelve，ConfigParser，hashlib模块

    闭包 def make_arerage(): l1 = [] def average(price): l1.append(price) total = sum(l1) return total/len ...

  4. 通过Blazor使用C#开发SPA单页面应用程序(3)

    今天我们来看看Blazor开发的一些基本知识. 一.Blazor组件结构 Blazor中组件的基本结构可以分为3个部分,如下所示: //Counter.razor //Directives secti ...

  5. 100天搞定机器学习|Day 30-32 微积分的本质

    3blue1brown系列课程,精美的动画,配上生动的讲解,非常适合帮助建立数学的形象思维,非常值得反复观看: http://www.3blue1brown.com/ 哔哩哔哩: https://sp ...

  6. trec 2019 fair ranking track

    trec 2019 fair ranking track     最近实验室要求参加trec 2019新出的track:fair ranking track.这里整理一下该任务的思想和要求.这次tra ...

  7. Delegate，Block，Notification， KVC，KVO，Target-Action

    Target-Action: 目标-动作机制,所有的UIControl及子类都是这个机制:原理:在对象产生某个事件的特定时刻,给一个对象发送一个消息:类内部target去执行action方法 Dele ...

  8. Spring源码剖析5：JDK和cglib动态代理原理详解

    AOP的基础是Java动态代理,了解和使用两种动态代理能让我们更好地理解 AOP,在讲解AOP之前,让我们先来看看Java动态代理的使用方式以及底层实现原理. 转自https://www.jiansh ...

  9. Hibernate中Criteria的完整用法2

    Criteria的完整用法 QBE (Query By Example) Criteria cri = session.createCriteria(Student.class); cri.add(E ...

  10. Windows下如何使用Tensorflow Object Detection API

    https://blog.csdn.net/mr_jor/article/details/79071963 记得要把model里的research文件夹和research\slim 文件夹 添加到PY ...