img 图片标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片标签</title>
</head>
<body>
<img src="2.gif" alt="这是一个大松鼠" width="100px" height="500px" />
</body>
</html>
1. 说明
- 使用 img 标签来引入一个外部图片
- img 标签也是一个自结束标签
2. 属性
- src:设置一个外部图片的路径
- alt:可以用来设置在图片不能显示时,对图片的描述
1.搜索引擎可以通过 alt 属性来识别不同的图片
2.如果不写 alt 属性,则搜索引擎不会对 img 中的图片进行收录 - width:可以用来修改图片的宽度,一般使用 px 作为单位
- height:可以用来修改图片高度
1.宽度和高度如果只设置一个,另一个也会等比例调整大小
2.如果两个值同时指定则按照你指定的值来设置
3.一般开发中除了自适应的页面,不建议设置 width 和 height
<img src="1.gif" alt="这是一个大松鼠" width="100px" height="500px" />
3. 补充
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box1 {
width: 200px;
height: 200px;
background-image: url(img/3.png);
background-repeat: no-repeat;
}
.box2 {
width: 200px;
height: 200px;
background-image: url(img/4.png);
background-repeat: no-repeat;
}
</style>
</head>
<body style="background-color: #bfa;">
<div class="box1"></div>
<div class="box2"></div>
<img src="img/3.png" />
<!-- 在body标签的最后引入外部的JS文件 -->
<!-- 以下代码只会在IE6中执行,其他浏览器中无效 -->
<!--[if IE 6]>
<script
type="text/javascript"
src="js/DD_belatedPNG_0.0.8a-min.js"
></script>
<script type="text/javascript">
Dd_belatedPNG.fix("*");
</script>
<![endif]-->
</body>
</html>
1. png24 图片问题
- 在 IE6 中,对图片格式 png24 的支持度不高
- 如果使用的图片格式是 png24,则会导致透明效果无法正常显示
2. 解决方法:
- 可以使用 png8 来代替 png24,即可解决问题,
- 但是使用 ong8 代替 png24 以后,图片的清晰度会有所下降
- 使用 JavaScript 来解决该问题,需要向页面中引入一个外部的 JavaScript 文件
- 然后再写一下简单的代码,来处理该问题
<!-- 以下代码只会在IE6中执行,其他浏览器中无效 -->
<!--[if IE 6]>
<script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
<script type="text/javascript">
Dd_belatedPNG.fix("*");
</script>
<![endif]-->
相对路径
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>相对路径</title>
</head>
<body>
<img src="2.gif" alt="这是一个大松鼠" />
</body>
</html>
相对路径值相对于当前资源所在目录的位置
1. src属性
- src属性配置的是图片的路径,目前我们所要使用的路径全都是相对路径
<img src="abc/bcd/2.gif" alt="这是一个大松鼠" />
- 可以使用…/来返回一级目录,返回几级目录就写几个…/
<img src="../../img/2.gif" alt="这是一个大松鼠" />
2. 相对路径的图片
-
图片的格式
- JPEG(JPG)
- JPEG图片支持的颜色比较多,图片可以压缩,但是它不支持透明
- 一般使用JPEG来保存照片等颜色丰富的颜色
- GIF
- GIF支持的颜色少,只支持简单的透明,支持动态图
- 图片颜色单一或者是动态图时可以使用gif
- PNG
- PNG支持的颜色多,并且支持复杂的透明
- 可以用来显示颜色复杂的透明图片
- JPEG(JPG)
-
图片的使用原则
- 效果不一致,使用效果好的
- 效果一致,使用小的
背景
背景样式和背景图片重复方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box1 {
width: 1024px;
height: 724px;
margin: 0 auto;
/*设置背景样式*/
background-color: #bfa;
background-image: url(img/1.png);
background-repeat: repeat-y;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
1. 背景样式
/*设置背景样式*/
background-color: #bfa;
2. 背景图片
background-image 来设置背景图片
- 语法:background-image:url(相对路径);
- 如果背景图片大于元素,默认会显示图片的左上角
- 如果背景和元素一样大,则会将背景图片全部显示
- 如果背景元素小于元素大小,则会默认将背景图片平铺以充满元素
- 可以同时为一个元素指定背景颜色和背景图片,
- 这样背景样式将会作为背景图片的底色
- 一般情况下设置背景图片时都会同时指定一个颜色
background-image: url(img/1.png);
3. 背景图片的重复方式
- background-repeat 用来设置背景图片的重复方式
- 可选值:
- repeat,默认值,背景图片会双重复(平铺)
- no-repeat,背景图片不会重复,有多大就显示多大
- repeat-x,背景图片沿水平方向重复
- repeat-y,背景图片沿垂直方向重复
background-repeat: repeat-y;
背景图片的定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box1 {
height: 500px;
margin: 0 auto;
/*
* 设置一个背景
*/
background-color: #bfa;
/*
* 设置一个背景图片
*/
background-image: url(img/4.png);
/*
* 设置一个图片不重复
*/
background-repeat: no-repeat;
/* background-position: -80px -40px; */
background-attachment: fixed;
}
body {
background-image: url(img/3.png);
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body style="height: 5000px;">
<div class="box1"></div>
</body>
</html>
1. 背景的定位
1. 说明
- 背景图片默认贴着元素的左上角显示
- 通过 background-position 可以调整背景图片在元素中的位置
2. 可选值
- 该属性可以使用 top right left bottom center 中的两个值来指定一个背景图片的位置
- top left 左上
- bottom right 右下
- 如果只给出一个值,则第二个值默认是 center
也可以直接指定两个偏移量
-
第一个是水平偏移量
- 如果指定的是一个正值,则图片向右移动指定的像素
- 如果指定的是一个负值,则图片向左移动指定的像素
-
第二个是垂直偏移量
- 如果指定的是一个正值,这图片向下移动指定的像素
- 如果指定的是一个负值,则图片向上移动指定的像素
background-position: -80px -40px;
2. 背景图片跟随滚动
-
background-attachment 用来设置背景图片是否随着页面一起滚动
-
可选值: - scroll,默认值,背景图片随着窗口滚动 - fixed,背景图片会固定在某一位置,不随页面滚动
不随窗口滚动的图片,我们一般都设置给 body,而不设置给其他元素
-
当背景图片的 background-attachment 设置为 fixed 时,
- 背景图片的定位永远相对于浏览器的窗口
background-attachment: fixed;
背景简写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body {
background-color: #bfa;
background: #bfa url(img/3.png) center center no-repeat fixed;
}
</style>
</head>
<body></body>
</html>
1. 分开写背景的各个样式
/* 设置一个背景颜色 */
/background-color: #bfa;
/*设置一个背景图片 */
background-image: url(img/3.png);
/* 设置背景不重复 */
background-repeat: no-repeat;
/*设置背景图片的位置*/
background-position: center center;
/*设置背景图片不随滚动条滚动 */
background-attachment: fixed;
2. 简写 background
- 通过该属性可以同时设置所有相关的样式
- 没有顺序的要求,谁在前谁在后都行
- 也没有数量的要求,不写的样式就使用默认值
background: #bfa url(img/3.png) center center no-repeat fixed;
sprite雪碧图(精灵图)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.btn:link {
/*将a转换为块元素*/
display: block;
/*设置宽高*/
width: 93px;
height: 29px;
/*设置背景图片*/
background-image: url(img/btn/btn.png);
/*设置背景颜色不重复*/
background-repeat: no-repeat;
}
.btn:hover {
/*
* 当是hover状态时,希望图片可以向左移动
*/
background-position: -93px 0;
}
.btn:active {
/*
* 当是active状态时,希望图片可以再向左移动
*/
background-position: -186px 0;
}
</style>
</head>
<body>
<!-- 创建一个超链接 -->
<a class="btn" href="#"></a>
</body>
</html>
link状态:
hover状态:
active状态:
1. 问题说明
- 做完功能以后,发现在第一次切换图片时,会发现图片有一个非常快的闪烁,
- 这个闪烁会造成一次不佳的用户体验。
2. 产生闪烁问题的原因:
- 背景图片时以为外部资源的形式加载进网页的,浏览器没加载一个外部资源就需要单独的发送一次请求,
- 但是我们的外部资源不是同时加载的,浏览器只有在资源被使用的时候才回去加载资源
- 我们这个练习,一上来浏览器只会加载 link.png 由于 hover 和 active 状态没有马上触发,
- 所以 hover.png 和 active.png 并不是立即加载的
- 当 hover 被触发时,浏览器才去加载 hover.png
- 当 active 被触发时,浏览器才去加载 active.png
由于加载图片需要一定的时间,所以在加载和显示的过程中会有一段时间背景图片无法显示,导致出现闪烁的情况
3. sprite雪碧图(精灵图)说明
- 为了解决该问题,我们可以将三个图片整合为一张图片,这样可以同时将三张图片一起加载,就不会出现闪烁的问题了
- 然后通过 background-position 来切换要显示的图片的位置,这种技术叫做图片整合技术,(CSS-Sprite)
- 优点
- 将多个图片整合为一张图片里,浏览器只需要发送一次请求,可以同时加载多个图片,提高了访问的效率,提高了用户的体验。
- 将多个图片整合为一张图片,减小了图片的总大小,提高了请求的速度,增加了用户体验
4. 利用雪碧图(精灵图)的练习
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box1{
width: 129px;
height: 45px;
background-image: url(img/amazon-sprite_.png);
}
.box2{
width: 42px;
height: 30px;
background-image: url(img/amazon-sprite_.png);
/*
* 设置偏移量
*/
background-position: -58px -338px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
原雪碧图:
页面展示:文章来源:https://www.toymoban.com/news/detail-776748.html
文章来源地址https://www.toymoban.com/news/detail-776748.html
到了这里,关于HTML-img图片详解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!