HTML图像标签

最新推荐文章于 2024-09-16 14:51:13 发布

·尘·

最新推荐文章于 2024-09-16 14:51:13 发布

阅读量399

点赞数

分类专栏： html 文章标签： html css css3

本文链接：https://blog.csdn.net/qq_46133833/article/details/121918727

版权

html 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<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: 表示背景图像相对于元素本身是固定的，跟随元素一起滚动。

雪碧图的实现

思路

<div>元素通过 CSS 的 width 和 height 属性设置显示的区域大小
通过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