前端HTML标签图像的属性和使用/图像img与背景background的区别

时间:2023-01-29 23:45:52

1.图像的URL

1、URL
          1、目录结构
               目录:文件夹名称,保存网页内容的文件夹
          2、URL
               URL(Uniform Resource Locator)统一资源定位器,俗称 路径,用来表示 网络资源的地址
               资源:图片,音频,视频,文件等...
               路径:从当前位置到目标资源位置所经过的路线。

 2、 三种表现形式:
               1、绝对路径
                    1、什么是绝对路径
                         从文件*路径下开始的完整路径。
                         1、访问网络资源
                              由 协议名称、主机名(域名/IP地址)、目录路径、文件名
                              ex :获取 百度 LOGO
                                   协议名称:https
                                   主机名: www.baidu.com
                                   目录路径:img
                                   文件名:bd_logo1.png

                                   <img src="//www. baidu.com/img/bd_logo1.png" width="270" height="129">
                         2、访问本机资源
                              文件所在的*目录路径:?--文件所在的盘符
               2、相对路径
                    1、什么是相对路径
                         从当前文件所在的位置处开始,去查找资源文件所经过的路径就是相对路径

                         1、同目录
                              直接通过 资源文件名称 进行引用即可
                         2、子目录
                              先进入,再通过资源名称进行引用
                              images/1.jpg
                         3、父目录
                              先返回,在通过资源文件的名称或路径进行引用
                              返回:../
               3、根相对路径
                    特点:永远都是从网站所在的服务器根目录处开始查找
                    表现方式:/作为开始 


2.图像的格式

1、jpeg
图像图像联合专家组
.jpg 作为后缀来存储的
2、gif
                图形接口格式
                    特点:支持动画
                    .gif 作为后缀来存储的
       3、png
                    可移植网络图形
                    采用 无损压缩,有8位,24位,32位三种形式
                    支持 透明色(PNG24位不支持)
                    .png 作为后缀存储的 

3.图像的属性

  1、语法
                    <img>
  2、属性
                    1、src
                         要引用的图像URL(绝对,相对,根相对)
                         注意:URL 要严格区分大小写,服务器路径 严格区分大小写。本机路径则无所谓
                    2、width
                         宽度
                    3、height
                         高度

                         以 px 或 % 为单位的数值,如果省略单位不写,默认为 px
                         <img src="../Images/a.jpg" height="300">

                         注意: width 和 height 如果只给一个属性的话,那么另外一个属性会跟着等比缩放
                         <img width="100px" src="a.jpg"> 


4.图像的垂直对其方式

1、属性:vertical-align
               1、作用:
                    1、设置单元内容的垂直对齐方式
                    2、行内块元素或图片的垂直对齐方式
                         指定 行内块元素或图片元素两边的文本 相对于他们的 垂直对齐方式
               2、取值:
                    1、baseline
                         默认,基线对齐
                         文本基线:最后一行文本的底部
                    2、top
                    3、middle
                    4、bottom

               注意:对于图像来讲,可以设置 vertical-align为 非 baseline 以外的其他值来解决高度多 3px 的问题。 


5.背景background

1 、背景属性的作用
          控制元素的 背景颜色背景图像等信息
2、背景属性
          1、背景颜色
               属性:background-color
               取值:
                    合法颜色值
                    取值为 transparent(透明)
               注意:
                    背景颜色会从边框的位置处开始绘制
          2、背景图片
               属性:background-image
               取值:url(图片的URL)

               注意: 如果 背景图像和背景颜色同时存在的话,那么背景图会压在背景颜色的上面
          3、背景重复
               默认背景是有平铺效果
               属性:background-repeat
               取值:
                    1、repeat
                         默认值,垂直和水平方向平铺
                    2、no-repeat
                         不平铺,背景图只显示一次
                    3、repeat-x
                         仅在水平方向平铺
                    4、repeat-y
                         仅在垂直方向平铺
          4、背景图片尺寸
               属性:background-size
               取值:
                    1、value1 value2
                         value1:宽度
                         value2:高度
                    2、value1% value2%
                         取决于元素的宽和高的占比
                    3、cover
                         覆盖,把背景图扩充至足够的大(等比缩放),使背景图像 完全的覆盖到元素背景区域
                         注意:有可能,背景图显示不完整
                    4、contain
                         包含,把背景图扩充至足够的大(等比缩放), 直到背景图像的右边或下边碰到元素边缘为止
          5、背景图片固定
               属性:background-attachment
               取值:
                    1、scroll
                         默认值,背景会随着文档滚动
                    2、fixed
                         固定
          6、背景图像定位/位置(重难点)
               属性:background-position
               取值:
                    1、x y
                         x:背景图像横向偏移距离
                              取值为正,背景图向右移动
                              取值为负,背景图向左移动
                         y:背景图纵向偏移距离
                              取值为正,背景图向下移动
                              取值为负,背景图向上移动
                    2、x% y%
                         取决于父元素宽和高的占比
                    3、关键字
                         x:left/center/right
                         y:top/center/bottom

                         background-position:center;
                         注意: 使用关键字时,x,y的位置可以互换
                         background-position:top left;
              
               特殊使用方式:
               CSS Sprites : 图片拼合技术,将若干副小图像拼到一副大图中。以便减少服务器端的请求
               显示图像步骤:
               1、根据要显示的图标大小,创建一个一样大小的元素
 利用<span>或者<b>、<i>、<a>都行,设置他们的宽高
               2、将 拼合的图像作为 元素的背景,使用 背景图像定位的方式 移动图像以便显示要看的小图
 
               宽度:76px
               高度:15px
               x:-108px
               y:-238px
          7、背景属性简写
               将背景若干属性值声明在一个属性中
               语法:
                    background:color url() repeat attachment position;

               注意:如果采用 background的简写方式的话,被省略的值将采用默认值来取代
               background:red;

               常用方式:
                    background:url() repeat position;