一、背景图片练习

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

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

<!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. oracle的开窗函数

    原创 select * from (select province, commodity, sum(price), ROW_NUMBER() OVER(PARTITION BY province  o ...

  2. v-text,v-html等区别

    首先我们知道vue中有很多自定义指令,以v- 开头,例如:v-text,v-bind,v-model, v-if,等 在这些指令中,部分指令之间是很容易被混淆,所以今天决定自己总结一下以下几个相似指令 ...

  3. python使用pip安装第三方库以及镜像使用豆瓣源安装第三方库

    2018/8/7  在使用pip安装pynum第三方库时的随笔 所有的前提都是你成功安装了pip 首先第一步 打开命令提示符  输入pip show pip 查看当前pip版本 然后可以上官网搜索一下 ...

  4. Linux部署项目遇到问题解决

    使用Linux部署web项目,可能会遇到各种各样问题导致服务启动失败,以下是我近期部署项目遇到的问题以及解决方案 一.场景:把war包放入tomcat的webapps文件夹下,然后启动tomcat服务 ...

  5. 使用nginx代理centos yum 源

    我们在安装centos 服务器时,可能会有以下情况: 局域网内有若干台服务器,但是只有一台服务器可以连接外网,其余服务器都不可以连接外网,但通过局域网与外网机器联通. 那么我们再使用 yum 安装软件 ...

  6. shardingjdbc 强制路由走主库查询实时数据 避免主从同步数据延迟

    @Beanpublic shardingsphere.demo.entity.Order order(){ shardingsphere.demo.entity.Order order=new Ord ...

  7. [NUnit] discover test finished: 0 found issue

    %Temp%\VisualStudioTestExplorerExtensions & restart visual studio

  8. Leetcode solution 227: Basic Calculator II

    Problem Statement Implement a basic calculator to evaluate a simple expression string. The expressio ...

  9. python3学习-lxml模块

    在爬虫的学习中,我们爬取网页信息之后就是对信息项匹配,这个时候一般是使用正则.但是在使用中发现正则写的不好的时候不能精确匹配(这其实是自己的问题!)所以就找啊找.想到了可以通过标签来进行精确匹配岂不是 ...

  10. DDOS浅谈

    一.DDOS攻击的来源 任何攻击都不会凭空产生,DDOS也有特定的来源.绝大多数的DDOS攻击都来自于僵尸网络.僵尸网络就是由数量庞大的可联网僵尸主机组成,而僵尸主机可以是任何电子设备(不仅是X86架 ...