Web图像技术：前端引入图片的各种方式及其优缺点

 
 
 
 

  
  
  
  
img { 
  
  
  
  
    display: none; 
  
  
  
  
} 
 
 
 
 

 
 
 
 

  
  
  
  
img { 
  
  
  
  
    object-fit: cover; 
  
  
  
  
    object-position: 50% 50%; 
  
  
  
  
} 
 
 
 
 

 
 
 
 

  
  
  
  
// html 
  
  
  
  
Some content

多个背景

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

 
 
 
 

  
  
  
  
.element { 
  
  
  
  
    background: url('cool-1.jpg'), url('cool-2.jpg'); 
  
  
  
  
} 
 
 
 
 

隐藏图像

我们可以在特定视口中隐藏和显示图像，如果未使用CSS设置图片，则不会下载该图片。与使用相比，这是一个额外的好处。

在上面的示例中，我们有一个背景图像，仅在视口宽度大于700px时显示。

可访问性问题

如果使用不当，背景图像可能会影响可访问性。例如，将其用于文章主题，这对于文章至关重要。

非开发人员无法下载

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

伪元素

可以将伪元素与CSS背景图像一起使用，例如在图像顶部显示覆盖图。对于这是不可能的，直到我们为叠加层添加单独的元素。

SVG Image

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

你是否注意到了prepareAspectRatio?它的作用是可以让图像占据SVG的整个宽度和高度，而不会被拉伸或压缩。

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

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

可访问性问题

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