web前端开发中各种图片引入方式及其优缺点一路向北√

.element{background:url('cool.jpg');}2、多个背景

使用CSS背景图片的好处是可以设置多个背景。考虑以下示例：

.element{background:url('cool-1.jpg'),url('cool-2.jpg');}3、隐藏图像

我们可以在特定的视口上隐藏和显示图片，而不会让图片被下载。如果未使用CSS设置图片，则不会下载该图片。这是比使用更多的好处。

@media(min-width:700px){.element{background:url('cool-1.jpg');}}在上面的示例中，我们有一个背景图像，仅在视口宽度大于700px时显示。

4、可访问性问题

5、非开发人员无法下载

你可能会觉得很有趣，但是普通人知道，如果要保存图像，只需单击鼠标左键，然后选择保存即可。CSS背景图片并非如此，我们必须先检查元素，然后在DevTools中的url中打开链接，然后才能下载随CSS添加的图像。

6、伪元素

可以使用伪元素与CSS背景图片一起使用，例如，在图片的顶部显示一个叠加元素。对于来说，除非我们为覆盖层添加一个单独的元素，否则无法做到这一点。

SVG被认为是一种图像，它最大的功能是在不影响质量的情况下进行缩放。此外，使用SVG，我们可以嵌入JPG、PNG或SVG图像。参见下面的HTML:

你是否注意到了prepareAspectRatio？这样一来，可以使图像占据SVG的整个宽度和高度，而不会被拉伸或压缩。

当宽度较大时，它将填充其父级（SVG）宽度而不会拉伸。

这非常类似于CSS中的object-fit:cover或background-size:cover。

1、可访问性问题

关于SVG的可访问性，这使我想起了