HTML-img图片详解

这篇具有很好参考价值的文章主要介绍了HTML-img图片详解。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

img 图片标签

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>图片标签</title>
  </head>
  <body>
    <img src="2.gif" alt="这是一个大松鼠" width="100px" height="500px" />
  </body>
</html>

html img,css,前端,html,css,web,css3

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>

html img,css,前端,html,css,web,css3

1. png24 图片问题

  1. 在 IE6 中,对图片格式 png24 的支持度不高
  2. 如果使用的图片格式是 png24,则会导致透明效果无法正常显示

2. 解决方法:

  1. 可以使用 png8 来代替 png24,即可解决问题,
    • 但是使用 ong8 代替 png24 以后,图片的清晰度会有所下降
  2. 使用 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>

html img,css,前端,html,css,web,css3

相对路径值相对于当前资源所在目录的位置

1. src属性

  1. src属性配置的是图片的路径,目前我们所要使用的路径全都是相对路径
<img src="abc/bcd/2.gif" alt="这是一个大松鼠" />
  1. 可以使用…/来返回一级目录,返回几级目录就写几个…/
<img src="../../img/2.gif" alt="这是一个大松鼠" />

2. 相对路径的图片

  1. 图片的格式

    • JPEG(JPG)
      1. JPEG图片支持的颜色比较多,图片可以压缩,但是它不支持透明
      2. 一般使用JPEG来保存照片等颜色丰富的颜色
    • GIF
      1. GIF支持的颜色少,只支持简单的透明,支持动态图
      2. 图片颜色单一或者是动态图时可以使用gif
    • PNG
      1. PNG支持的颜色多,并且支持复杂的透明
      2. 可以用来显示颜色复杂的透明图片
  2. 图片的使用原则

    • 效果不一致,使用效果好的
    • 效果一致,使用小的

背景

背景样式和背景图片重复方式

<!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>

html img,css,前端,html,css,web,css3

1. 背景样式

/*设置背景样式*/
background-color: #bfa;

2. 背景图片

background-image 来设置背景图片

  1. 语法:background-image:url(相对路径);
    • 如果背景图片大于元素,默认会显示图片的左上角
    • 如果背景和元素一样大,则会将背景图片全部显示
    • 如果背景元素小于元素大小,则会默认将背景图片平铺以充满元素
  2. 可以同时为一个元素指定背景颜色和背景图片,
    • 这样背景样式将会作为背景图片的底色
    • 一般情况下设置背景图片时都会同时指定一个颜色
background-image: url(img/1.png);

3. 背景图片的重复方式

  1. background-repeat 用来设置背景图片的重复方式
  2. 可选值:
    • 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>

html img,css,前端,html,css,web,css3

1. 背景的定位

1. 说明
  1. 背景图片默认贴着元素的左上角显示
  2. 通过 background-position 可以调整背景图片在元素中的位置
2. 可选值
  1. 该属性可以使用 top right left bottom center 中的两个值来指定一个背景图片的位置
    • top left 左上
    • bottom right 右下
  2. 如果只给出一个值,则第二个值默认是 center

也可以直接指定两个偏移量

  1. 第一个是水平偏移量

    • 如果指定的是一个正值,则图片向右移动指定的像素
    • 如果指定的是一个负值,则图片向左移动指定的像素
  2. 第二个是垂直偏移量

    • 如果指定的是一个正值,这图片向下移动指定的像素
    • 如果指定的是一个负值,则图片向上移动指定的像素
background-position: -80px -40px;

2. 背景图片跟随滚动

  1. background-attachment 用来设置背景图片是否随着页面一起滚动

  2. 可选值: - scroll,默认值,背景图片随着窗口滚动 - fixed,背景图片会固定在某一位置,不随页面滚动

    不随窗口滚动的图片,我们一般都设置给 body,而不设置给其他元素

  3. 当背景图片的 background-attachment 设置为 fixed 时,

    • 背景图片的定位永远相对于浏览器的窗口
background-attachment: fixed;

html img,css,前端,html,css,web,css3

背景简写

<!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>

html img,css,前端,html,css,web,css3

1. 分开写背景的各个样式

/* 设置一个背景颜色 */
/background-color: #bfa;
/*设置一个背景图片 */
background-image: url(img/3.png);
/* 设置背景不重复 */
background-repeat: no-repeat;
/*设置背景图片的位置*/
background-position: center center;
/*设置背景图片不随滚动条滚动 */
background-attachment: fixed;

2. 简写 background

  1. 通过该属性可以同时设置所有相关的样式
  2. 没有顺序的要求,谁在前谁在后都行
    • 也没有数量的要求,不写的样式就使用默认值
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状态:
html img,css,前端,html,css,web,css3

hover状态:

html img,css,前端,html,css,web,css3

active状态:

html img,css,前端,html,css,web,css3

1. 问题说明

  1. 做完功能以后,发现在第一次切换图片时,会发现图片有一个非常快的闪烁,
  2. 这个闪烁会造成一次不佳的用户体验。

2. 产生闪烁问题的原因:

  1. 背景图片时以为外部资源的形式加载进网页的,浏览器没加载一个外部资源就需要单独的发送一次请求,
    • 但是我们的外部资源不是同时加载的,浏览器只有在资源被使用的时候才回去加载资源
  2. 我们这个练习,一上来浏览器只会加载 link.png 由于 hover 和 active 状态没有马上触发,
    • 所以 hover.png 和 active.png 并不是立即加载的
  3. 当 hover 被触发时,浏览器才去加载 hover.png
  4. 当 active 被触发时,浏览器才去加载 active.png

    由于加载图片需要一定的时间,所以在加载和显示的过程中会有一段时间背景图片无法显示,导致出现闪烁的情况

3. sprite雪碧图(精灵图)说明

  1. 为了解决该问题,我们可以将三个图片整合为一张图片,这样可以同时将三张图片一起加载,就不会出现闪烁的问题了
  2. 然后通过 background-position 来切换要显示的图片的位置,这种技术叫做图片整合技术,(CSS-Sprite)
  3. 优点
    • 将多个图片整合为一张图片里,浏览器只需要发送一次请求,可以同时加载多个图片,提高了访问的效率,提高了用户的体验。
    • 将多个图片整合为一张图片,减小了图片的总大小,提高了请求的速度,增加了用户体验

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>

原雪碧图:

html img,css,前端,html,css,web,css3

页面展示:

html img,css,前端,html,css,web,css3文章来源地址https://www.toymoban.com/news/detail-776748.html

到了这里,关于HTML-img图片详解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包