HTML图像标签

·  阅读 122

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

<img>元素: 在HTML页面中显示一张图片

属性

  • src: 必选项,用来设置一张图片的路径。该路径可以是绝对路径,也可以是相对路径。
  • alt: 可选项,用来定义了描述图像的替换文本。当浏览器无法正常显示指定图片时,会显示该属性值的内容。

默认样式: 显示图片的原大小

 <img>元素可以设置显示的大小

(废弃)元素的属性:

  • width: 表示宽度
  • height: 表示高度

CSS的样式属性:

  • width: 表示宽度
  • height: 表示高度
  • title 属性:鼠标悬停在图像上时所显示的文本内容。

注意: 设置图片显示的大小时,一定要注意图片的高宽比

  • 只设置宽度或高度
  • 只设置宽度或高度的值,另一个属性的值设置为auto

背景图像

CSS 属性:

  • background-image 属性
  • background-repeat 属性
  • background-size 属性
  • background-position 属性
  • background-attachment 属性

平铺方式

background-repeat 属性具有 4 个值,具体如下:

  • repeat:图像同时在水平方向和垂直方向进行重复。如果最后一个图像无法显示完整,则会被剪裁。
  • no-repeat:图像在水平方向和垂直方向都不会重复。
  • space:图像同时在水平方向和垂直方向进行重复。第一个重复的图像和最后一个重复的图像会被固定在元素的边缘,同时空白间隙会均匀地分布在重复的图像之间。
  • round:跟随浏览器窗口的尺寸增长,重复的图像会被拉伸(重复的图像之间不存在空白间隙)以铺满整个浏览器窗口。

图片大小

background-size 属性用来设置背景图像在 HTML 页面中的显示大小。

  • cover:缩放背景图像以完全覆盖背景区,可能背景图像部分看不见。
  • contain:缩放背景图像以完全装入背景区,可能背景区部分空白。
  • 一个值:表示设置背景图像的宽度为这个值,而高度值为 auto。
  • 两个值:第一个值表示设置背景图像的宽度,第二个值表示设置背景图像的高度。

图像位置

background-position 属性用来设置背景图像在 HTML 页面中的初始位置。该属性具有 3 种类型的值,具体如下:

  • 关键字:center、left、right、top 和 bottom,分别表示居中、左边、右边、顶部和底部。
  • 长度值:绝对长度值和相对长度值都可以使用。
  • 百分比值

背景关联

background-attachment属性: 设置背景图像是否滚动

  • fixed: 表示背景图像相对于浏览器窗口是固定的。
  • local: 表示背景图像相对于内容是固定的,跟随内容一起滚动。
  • scroll: 表示背景图像相对于元素本身是固定的,跟随元素一起滚动。

雪碧图的实现

思路

  1. <div>元素通过 CSS 的 widthheight 属性设置显示的区域大小

  2. 通过background使用雪碧图

    (1)background-image属性: 引入雪碧图

    background-repeat: no-repeat; -> 将雪碧图设置为不重复

    (2)background-position属性: 设置雪碧图的位置

    水平方向:

    a. 如果向左移动,值为负值

    b. 如果向右移动,值为正值

    c. 值如果为零,表示不移动

    垂直方向

    a. 如果向上移动,值为负值

    b. 如果向下移动,值为正值

    c. 值如果为零,表示不移动

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>雪碧图</title>
  <style>
    body {
      background-color: gray;
    }

    .cart {
      width: 25px;
      height: 20px;
      background-image: url(files/toolbars.png);
      background-repeat: no-repeat;
      background-position: -55px -7px;
    }
  </style>
</head>

<body>
  <div class="cart"></div>
</body>

</html
复制代码
分类:
前端
标签:
分类:
前端
标签: