0
0

HTML-img图片详解

文章目录

img 图片标签

<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>图片标签</title></head><body><imgsrc="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
<imgsrc="1.gif"alt="这是一个大松鼠"width="100px"height="500px"/>

3. 补充

<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title></title><styletype="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><bodystyle="background-color: #bfa;"><divclass="box1"></div><divclass="box2"></div><imgsrc="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 图片问题

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

相对路径

<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>相对路径</title></head><body><imgsrc="2.gif"alt="这是一个大松鼠"/></body></html>

请添加图片描述

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

1. src属性

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

2. 相对路径的图片

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

背景

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

<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title></title><styletype="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><divclass="box1"></div></body></html>

请添加图片描述

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;

背景图片的定位

<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title></title><styletype="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><bodystyle="height: 5000px;"><divclass="box1"></div></body></html>

请添加图片描述

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;

请添加图片描述

背景简写

<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title></title><styletype="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

  1. 通过该属性可以同时设置所有相关的样式
  2. 没有顺序的要求，谁在前谁在后都行 - 也没有数量的要求，不写的样式就使用默认值
background: #bfa url(img/3.png) center center no-repeat fixed;

sprite雪碧图(精灵图)

<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title></title><styletype="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><!-- 创建一个超链接 --><aclass="btn"href="#"></a></body></html>

link状态:
请添加图片描述

hover状态：

请添加图片描述

active状态：

请添加图片描述

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. 利用雪碧图(精灵图)的练习

代码：

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><styletype="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><divclass="box1"></div><divclass="box2"></div></body></html>

原雪碧图:

请添加图片描述

页面展示：

请添加图片描述

标签： 前端 html css
本文转载自: https://blog.csdn.net/weixin_64933233/article/details/127980123
版权归原作者 王十四兄 所有， 如有侵权，请联系我们删除。
登录后发布评论

“HTML-img图片详解”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

机器人技术在安全领域的重要作用

安全学习记录——网络篇（一）

图腾柱PFC：HP1010为您的电动两轮车之旅提供绿色，高效，安全的动力

单元测试数据库回滚问题

这才是单元测试，之前我们都错了

【C语言基础】：字符函数和字符串函数

ChatGPT-Next-Web SSRF漏洞+XSS漏洞复现(CVE-2023-49785)

文章导航