html怎么添加背景图片_Web图片添加方法论

https://ishadeed.com/article/image-techniques/

前端开发者在构建网站时需要做的一个决定是添加图片的技术。它可以是一个HTML ，或者是通过CSS背景生成的图片，也可能是SVG 。

选择正确的技术很重要，对网站的性能和可访问性起着巨大的作用。

在这篇文章中，我们将学习各种图片添加方式，以及每种方式的优缺点，以及什么时候和为什么要使用每种方式的上下文。

HTML元素

在最简单的情况下，image元素必须根据需要包含src属性。

<img src="cool.jpg" alt="">

设置宽高属性

在页面加载时，它们会在页面的图片加载过程中出现一些布局移动。为了避免这种情况，我们可以为它设置宽度和高度属性。

<img src="cool.jpg" width="200" height="100" alt="">

虽然这对有些人来说可能看起来有点老套，但还是很有用的。让我们来直观地理解一下这个概念。

你注意到了吗，右边的图片即使还没有加载，也会保留空间吗？这是因为宽度和高度已经设置好了。它有明显的区别!

Demo:https://codepen.io/shadeed/pen/a42ab701809acfecdd4d8f472bb6c043?editors=0100

用CSS隐藏图片

一张图片可以用CSS隐藏起来。但是，它仍然会被加载到页面中。因此，在做的时候请注意。如果一个图片应该被隐藏，那么可能是为了装饰目的。

img {
        display: none;}

还是那句话，上面的内容不会阻止浏览器加载图片，即使它在视觉上是隐藏的。原因是 被认为是被替换的元素，所以我们无法控制它加载的内容。

可访问性问题

HTML图片应该通过将alt属性设置为有意义的描述来访问。这对屏幕阅读器用户来说是非常有帮助的。

但是，如果不需要alt描述，请不要删除，如果删除了，图片的src就会被读出! 这对可访问性是非常不利的。

不仅如此，如果图片因为某些原因没有加载，而它有一个明确的alt说明，那么它将会作为一个回退显示。既然有一些有趣的事情我想让大家知道，那我们就从视觉上说说吧。

我们有以下的图片。

class=class=

src是无效的，没有加载。前者没有alt属性，而后者有一个空的alt。你能期待这样的视觉效果吗？

没有alt的图片仍然保留了它的空间，这让人感到困惑，也不利于访问。而另一张折叠起来，以适应其空的alt属性的内容，这就造成了它因为有边框而显得很细小。

但是，当有了alt属性值后，它就会变成这样的样子。

这不是很好的反馈吗？另外，当图片源失败时，可以给它们添加伪元素。

响应式图片

的好处是，它可以扩展为具有特定视口大小的照片的多个版本。比如说，这可以用于文章图片。

我们有两种不同的方式获得一组响应式的图片集。

Srcset属性

<img src="small.jpg" srcset="medium.jpg 500w, large.jpg 800w" alt="">

这是一个简单的问题。对于我来说，我认为使用 srcset并不是一个完美的解决方案，根据屏幕宽度的不同，出现多个图片的大小。这个选择只能由浏览器来挑选合适的图片，而我们并没有控制权。

HTML Picture 元素

<picture>  <source srcset="large.jpg" media="(min-width: 800px)" />  <source srcset="medium.jpg" media="(min-width: 500px)" />  <img src="small.jpg" />picture>

另一个选择是使用 元素。我更喜欢这个，因为它更容易和更可预测。

demo:https://codepen.io/shadeed/pen/d703aee137f38c138f2323a0252548ac?editors=1100

调整图片的大小

我们可以使用 的一个伟大的东西就是object-fit和object-position属性。它们让我们可以控制 的内容如何调整大小和位置，就像CSS背景图片一样。

object-fit的可能值有：fill, contain, cover, none, scale-down

它可以这样使用。

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

现在我们已经对 元素做了一个介绍，现在是时候继续前进，探索第二个技巧了。

CSS背景图片

当使用CSS背景来显示图片时，需要一个有内容或特定宽度或高度的元素。通常情况下，背景图片的主要用途应该是用于装饰。

如何使用CSS背景图片

很简单，我们需要一个元素。

class="element">Some content</div>

.element {
          background: url('cool.jpg');}

多重背景

使用CSS背景图片的好处是有多个背景，可以用CSS轻松控制。考虑一下下面的例子。

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

隐藏图像

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

@media (min-width: 700px) {
          .element {
              background: url('cool-1.jpg');    }}

在上面的例子中，我们有一个背景图片，只有当视口宽度大于700px时才会显示。

可访问性问题

如果使用不正确，背景图片可能会影响可访问性。例如，将其用于文章中的大拇指，这对文章至关重要。