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()中,图片的地址可以是本地的地 ...
随机推荐
- 曹工杂谈：Linux服务器上，Spring Boot 原地修改 jar 包配置文件/替换class文件，免去重复上传的麻烦
一.前言 相信很多同学有这样的需求,现在很多公司都有多地的研发中心,经常需要跨地区部署,比如,博主人在成都,但是服务器是北京的.一般城市间网络都不怎么好,上传一个几十兆的jar包那是真的慢,别说现在微 ...
- js页面3秒自动跳转
如何让当前页面3秒以后自动跳转到其他页面?JS页面自动跳转 想实现登陆后3秒自动跳转到某页的功能,在网上搜了一下,供以后使用 1.<script language= "javasc ...
- DataOps系列丨数据的“资产负债表”与“现状”
作者:DataPipeline CEO 陈诚 <跨越鸿沟>的作者Geoffrey Moore曾说“没有数据,运营企业就像一个又聋又瞎的人在高速上开车一样”.数据的价值从未像现在这样被企业重 ...
- 手把手教你grid布局
概述 目前css布局方案中,网格布局可以算得上是最强大的布局方案了.它可以将网页分为一个个网格,然后利用这些网格组合做出各种各样的布局. 基本概念 在学习grid布局之前,我们需要了解一些基本概念 1 ...
- SpringMVC学习笔记之---简单入门
SpringMVC简单入门 (一)什么是MVC设计模式 (1)model:模型数据,业务逻辑 (3)view:呈现模型,与用户进行交互 (3)controller:负责接收并处理请求,响应客户端 (二 ...
- 自定义itemClickView
极力推荐文章:欢迎收藏 Android 干货分享 阅读五分钟,每日十点,和您一起终身学习,这里是程序员Android 本篇文章主要介绍 Android 开发中的部分知识点,通过阅读本篇文章,您将收获以 ...
- ccf 201903-3 损坏的RAID5
9月份考ccf,暑假打算做一些往年的真题... 这个题,一开始真是把我给看晕了 传说中的大模拟,果然不简单QAQ 首先读懂题目就是一个大难点,特别是对于我这种题目一长就看不进去的人来说 读懂题目之后, ...
- form提交的几种方式
背景 一直使用postman作为restful接口的调试工具,但是针对post方法的几种类型,始终不明白其含义,今天彻底了解了下 form提交的来源 html页面上的form表单 <form a ...
- android ——可折叠式标题栏
CollapsingToolbarLayout是一个作用于Toolbar上的布局,可以让Toolbar的效果变得更加丰富: 但是CollapsingToolbarLayout是不能独立存在的,它这能作 ...
- io流处理文件夹复制功能(java代码)
拷贝某个目录下得所有文件拷指定位置 思想归纳 首先我们需要做的先获取到资源文件夹路径,这里我们先在程序中写死,然后我们还需要一个目标文件夹就是你需要拷贝到哪里.有了这两个文件夹我就可以进行复制了 然后 ...