一、背景图片练习

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

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

<!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. Zabbix在 windows下监控网卡

    1.zabbix自定义监控Windows服务器的原理 Zabbix为Windows服务器的监控提供了PerfCounter(性能计数器)这个功能.Zabbix客户端通过PerfCounter获取Win ...

  2. 基于JaCoCo的Android测试覆盖率统计（二）

    > 本文章是我上一篇文章的升级版本,详见地址:https://www.cnblogs.com/xiaoluosun/p/7234606.html ## 为什么要做这个?1. 辛辛苦苦写了几百条测 ...

  3. JavaScript数据结构——字典和散列表的实现

    在前一篇文章中,我们介绍了如何在JavaScript中实现集合.字典和集合的主要区别就在于,集合中数据是以[值,值]的形式保存的,我们只关心值本身:而在字典和散列表中数据是以[键,值]的形式保存的,键 ...

  4. 携程 Apollo 配置中心传统 .NET 项目集成实践

    官方文档存在的问题 可能由于 Apollo 配置中心的客户端源码一直处于更新中,导致其相关文档有些跟不上节奏,部分文档写的不规范,很容易给做对接的新手朋友造成误导. 比如,我在参考如下两个文档使用传统 ...

  5. webpack4核心模块tapable源码解析

    _ 阅读目录 一:理解Sync类型的钩子 1. SyncHook.js 2. SyncBailHook.js 3. SyncWaterfallHook.js 4. SyncLoopHook.js 二: ...

  6. 【算法】【查找】二分法 Bisection

    #include<stdio.h> int main(){ ,,,,,,,,,,,,,,}; ; //长度 ; //要查找到的值 int Bisection(int x,int* a,in ...

  7. 解决Springboot整合ActiveMQ发送和接收topic消息的问题

    环境搭建 1.创建maven项目(jar) 2.pom.xml添加依赖 <parent> <groupId>org.springframework.boot</group ...

  8. 通过Blazor使用C#开发SPA单页面应用程序(4) - Ant Design Button

    前面学习了Blazor的特点.环境搭建及基础知识,现在我们尝试的做个实际的组件. Ant Design是蚂蚁金服是基于Ant Design设计体系的 UI 组件库,主要用于研发企业级中后台产品.目前官 ...

  9. Python中模块与包的导入（朴实易懂版的总结）

    这几天,被python包与模块的导入问题,折磨的不行,以前想的很简单,其实不然,经查资料研究,特总结如下: 基本注意点 模块:一般指一个py文件:包:含有许多py文件的文件夹,含有 或不含有(Pyth ...

  10. vue-cli3 按需引入element-ui

    按照官网的教程:按需引入需要借助:babel-plugin-component 安装:babel-plugin-component 注意:官网是修改 .babelrc 文件,我这里为了方便就直接修改 ...