HTML和CSS中的图像与背景图像这是【从头学前端】系列文章的第二十四篇-《HTML和CSS中的图像与背景图像》 HTM

这是我参与8月更文挑战的第26天，活动详情查看：8月更文挑战

Hello 大家好，我是一碗周，不是你想的那个“一碗粥”，是一个不想被喝掉的前端👨🏻‍💻，如果我写的文章有幸可以得到你的青睐，万分有幸~

这是【从头学前端】系列文章的第二十四篇-《HTML和CSS中的图像与背景图像》

本系列文章在掘金首发，编写不易转载请获得允许

写在前面

本篇文章我们将来学习HTML和CSS中图像的相关内容，本篇文章会涉及到的内容如下图所示：

图像(导读).png

`<img>`图像元素

HTML提供<img>元素用于在页面中表示一个图像，该元素为一个空元素。使用src属性来引入一张图片的路径，这个路径既可以是相对路径也可以是绝对路径。

tips：关于相对路径和绝对路径可参考相对路径和绝对路径

如下代码示例的<img>元素的用法：

<body>
    <img src="./../image/4.jpg" />
</body>

代码运行结果如下图所示：

01_img元素.png

<img>元素常用的属性如下所示：

src：表示图片的地址，这个属性是必须的。
alt：用来定义了描述图像的替换文本。当浏览器无法正常显示指定图片时，会显示该属性值的内容。这个属性是可选的，但是没有这个属性和属性值为空时存在区别的。当不具备alt属性时，图像是该内容的关键部分；当为空时说明该图像不是内容的关键部分，非可视化浏览器在渲染的时候将会忽略。
title：鼠标悬停在图像上时所显示的文本内容。

HTML 标准并没有规定<img>元素所支持的图像格式，或者必须支持的图像格式。所以不同浏览器所支持的图像格式可能会不相同。大概支持的图像格式有JPEG、GIF、PNG、APNG、SVG、BMP、BMP ICO和PNG ICO格式。

值得注意的是，从技术角度来说，<img>元素并没有将一张图像嵌入到HTML页面中，只是在HTML页面进行占位并指定了该图像文件的路径而已。所以，浏览器在加载解析HTML页面时，会单独加载图像文件。如下图所示：

02_图像的加载.png

为图像指定宽高

为<img>元素指定宽高比较容易，有两种方式，第一种通过<img>提供的属性即width和height；还有一种就是通过CSS的方式来实现，一般都是使用CSS的方式来控制。需要注意的是 ，高宽比一定要与原图像的高宽比保持一致，否则该图像会被拉伸。

如下代码展示了为<img>元素指定宽高：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>为img指定宽高</title>
        <style>
            .image {
                /* 如果仅仅指定一边，另一半会按照比例自动缩放 */
                width: 500px;
            }
        </style>
    </head>
    <body>
        <!-- 同时指定宽高如果不和图片保存一直将会拉伸图片 -->
        <img width="500px" height="300px" src="./../image/4.jpg" alt="蓉蓉姐" />
        <img class="image" src="./../image/4.jpg" alt="二老板" />
    </body>
</html>

代码运行结果如下图所示：

02_指定img宽高.png

在上面的代码中，我们为第一个<img>同时指定宽度和高度，且宽高之比与原图像不符，导致最终的图片被拉伸。

可替换元素与非替换元素

可替换元素 又称可置换元素 英文为replaced element，其展现效果不是由CSS控制的 ，这些元素是一种外部对象，它们外观的渲染，是独立于CSS的。

非替换元素 又称非置换元素 英文non-replaced element，其内容由CSS渲染直接表现给客户端 。

可替换元素

一个不收CSS渲染控制，CSS渲染模型并不会考虑对此内容的渲染，且元素本身一般情况下拥有固定的尺寸，例如<img>元素的默认尺寸就是图片的尺寸，这样的元素称为可替换元素 。对于可替换元素，浏览器会根据元素的标签和属性，例如<img>元素的width和height属性，来决定元素的具体显示内容。

可替换元素的内容不受当前文档的样式的影响，CSS可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。
举个例子，浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来，图片的内容由src决定，CSS并不考虑对图片的内容进行渲染。
CSS中常见的可替换元素，除<img>外该有<iframe>、<video>、<embed>等。有些元素在特定情况下会被当作可替换元素处理，例如<option>、<audio>、<canvas>、<object>、<applet>、<input>等。

非替换元素

非替换元素是其内容包含在文档中的元素，其内容可以受CSS渲染控制。

非替换元素的内容不会超出CSS的模型范围，CSS在渲染时会考虑非替换元素的内容。
HTML的大多数元素是不可替换元素，即其内容直接表现给浏览器，例如<div>、<p>、<h1>~<h6>、<table>等等等等。

CSS提供的控制可替换元素的属性

介于可替换元素的特性，CSS提供了两个属性可以控制可替换元素中包含的内容对象在该元素的盒区域内的位置或定位方式。

object-fit属性

CSS提供的object-fit属性指定可替换元素的内容对象在元素盒区域中的填充方式。该元素的属性值如下所示：

contain：该属性会将被替换内容的等比例缩放，保存原比例。如果容器高宽比例不符，不匹配区域将没有内容
cover：该属性会将替换内容等比例缩放至容器大小，内容将会被裁减
fill：该属性会拉伸替换内容至容器大小，内容将会被扭曲
none：原始尺寸
scale-down：与none和contain其中一个的效果相同，这取决于两者那个最终的尺寸更小。

如下代码展示了object-fit属性的用法：

HTML结构如下：

<body>
    <div>
        <h5>contain</h5>
        <img class="contain" src="../image/2.jpg" />
    </div>
    <div>
        <h5>cover</h5>
        <img class="cover" src="../image/2.jpg" />
    </div>
    <div>
        <h5>fill</h5>
        <img class="fill" src="../image/2.jpg" />
    </div>
    <div>
        <h5>none</h5>
        <img class="none" src="../image/2.jpg" />
    </div>
    <div>
        <h5>scale-down</h5>
        <img class="scale-down" src="../image/2.jpg" />
    </div>
</body>

CSS代码如下：

body { margin: 0; padding: 0 20px; }
div { float: left; margin-right: 24px; }
img {
    width: 320px;
    height: 180px;
    border: 1px solid #000;
}
/* 适应效果 */
.contain { object-fit: contain; }
/* 填充效果 */
.cover { object-fit: cover; }
/* 拉伸效果 */
.fill { object-fit: fill; }
/* 原始效果 */
.none { object-fit: none; }
/* 适应填充二选一 */
.scale-down { object-fit: scale-down; }

代码的运行结果如下图所示：

03_object-fit属性.png

object-position属性

CSS提供的object-position指定可替换元素的内容对象在元素盒区域中的位置。该属性可以接收两个值，也可以接收一个值，我们分别来讨论：

接收一个值的时候，如果这个值为长度值、百分比或者center的时候，既表示水平的位置也表示垂直的位置；如果这个值为为left、right时，表示水平方向；如果这个值为top、bottom，这个值表示垂直方向
接收两个值的时候第一个值表示水平方向，可以接收值有left、center、right和长度值或者百分比；第二个值表示垂直方向，可以接收值有top、center、bottom和长度值或者百分比。

如下代码展示了object-position属性的用法：

HTML结构如下：

<body>
    <div>
        <img class="length" src="../image/2.jpg" />
    </div>
    <div>
        <img class="left" src="../image/2.jpg" />
    </div>
    <div>
        <img class="center" src="../image/2.jpg" />
    </div>
    <div>
        <img class="top" src="../image/2.jpg" />
    </div>
</body>

CSS代码如下：

body {
    margin: 0;
    padding: 20px;
}
div {
    float: left;
    margin-right: 24px;
}
img {
    width: 320px;
    height: 120px;
    border: 1px solid #000;
    object-fit: contain;
}
.length {
    object-position: 10px;
}
.left {
    object-position: left;
}
.center {
    object-position: center;
}
.top {
    object-position: top;
    height: 500px;
}

代码的运行结果如下图所示：

04_object-position属性.png

背景图像

CSS中的背景图像主要是指有关background属性的相关内容，该属性是其实是一个简写属性，其属性可以拆分为如下：

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

背景图像

使用background-image属性来引入一个或者多个背景图像，通过url()函数引入，该函数的值为图片的路径，多个使用逗号拆分。

如下代码展示了background-image属性的用法：

body {
    background-image: url('./../image/2.jpg');
}

代码运行结果如下所示：

05_背景图像.png

平铺方式

background-repeat属性用来设置背景图像的重复方式。背景图像可以按照水平方向、垂直方向或者两轴方向重复或者不重复。该属性具有4个值，具体如下：

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

由于background-repeat属性分为水平方向是否重复和垂直方向是否重复，所以该属性的值是两个：

第一个值：表示水平方向图像是否重复。可使用上述4个值中的一个。
第二个值：表示垂直方向图像是否重复。可使用上述4个值中的一个。

当然，background-repeat属性也可以使用单个值来进行设置，具体情况如下：

单值	等价于双值
`repeat-x`	`repeat no-repeat`
`repeat-y`	`no-repeat repeat`
`repeat`	`repeat repeat`
`space`	`space space`
`round`	`round round`
`no-repeat`	`no-repeat no-repeat`

如下代码展示了background-repeat属性的用法

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>平铺方式</title>
        <style>
            div {
                background-image: url('../image/icon.png');
                width: 144px;
                height: 84px;
            }

            .no-repeat { background-repeat: no-repeat; }

            .repeat { background-repeat: repeat; }

            .repeat-x { background-repeat: repeat-x; }

            .repeat-y { background-repeat: repeat-y; }
        </style>
    </head>
    <body>
        <p>no-repeat</p>
        <div class="no-repeat">&nbsp;</div>
        <p>repeat</p>
        <div class="repeat">&nbsp;</div>
        <p>repeat-x</p>
        <div class="repeat-x">&nbsp;</div>
        <p>repeat-y</p>
        <div class="repeat-y">&nbsp;</div>
    </body>
</html>

代码运行结果如下所示：

06_平铺方式.png

图像位置

CSS中提供的background-position属性用于设置背景图像的位置，其值与使用方式与object-positon属性一致，这里不做赘述。

图像大小

CSS提供的background-size属性用于设置其背景图像在HTML页面显示的大小，该属性具有4种类型的值，具体如下：

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

background-size属性与object-fit属性类似，这里就不做代码演示了。

精灵图

不要以为精灵图是下面这个样子的

精灵图.png

这个样子的精灵图也不是不存在，存在的话那就是用于做宝可梦图鉴吧。

CSS中的精灵图又称为雪碧图，应用在使用了众多小图标的网站中。精灵图的做法就是把众多的小图标整合成一个图片，通过backgroud-postion属性分别指定使用这张图片中的哪个小图标。

这样做法的好处就是HTML页面的外部资源请求减少，对内存和带宽更加友好。如下图所示展示了精灵图：

y.qq_sprite.png

上图是QQ音乐Web版中用到的精灵图

如下代码展示了精灵图的用法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精灵图</title>
    <style>
        .sprite {
            width: 34px;
            height: 34px;
            background-image: url('../image/y.qq_sprite.png');
            background-repeat: no-repeat;
            /* 通过 background-position 属性设置背景图像的偏移量 */
            background-position: -40px 0;
        }
    </style>
</head>
<body>
    <div class="sprite"></div>
</body>
</html>

代码运行结果如下：

07_精灵图.png

如上述示例运行的效果，我们可以看到浏览器窗口只显示精灵图中的某个指定小图标。但实际上的情况如下图所示：

08_精灵图分析图.png

如上述解析图所示，精灵图的实现方式如下：

<div>元素通过CSS的width和height属性设置显示的区域大小为34px * 34px。
通过CSS的background-image属性为<div>元素引入背景图像，并设置为不重复显示。
通过CSS的background-position属性设置背景图像显示的位置（水平方向向左移动 40px），以达到显示想要显示的图标。

总结

图像(总结).png

预告：下一篇文章我们将来学习HTML中的列表以及对列表样式的处理

HTML和CSS中的图像与背景图像

写在前面

<img>图像元素

为图像指定宽高

可替换元素与非替换元素

可替换元素

非替换元素

CSS提供的控制可替换元素的属性

object-fit属性

object-position属性

背景图像

背景图像

平铺方式

图像位置

图像大小

精灵图

总结

`<img>`图像元素