Question

我正在尝试在我的html页面上显示图像，并注意到如果我想使用CSS添加图像我必须使用

.jumbotron {
  display: flex;
  align-items: center;
 background-image: url('https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/jumbotron.jpg');
  background-size: cover;
}

对于我必须使用的html页面上的相同图像：

<div class="row">
      <figure class="col-sm-6">
            <p>Kitchen</p>
            <img src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/jumbotron.jpg">
      </figure>
  </div>

那么这里有什么不同？为什么每个文件使用不同的属性加载相同的图像？

Answer 1

CSS适用于background图片，适用于foreground图片的HTML。如果您的HTML图像是透明的，您可以通过它看到背景。

您的CSS图片具有HTML不具备的一些功能;它可以定位，大小，你可以玩帆布等。

因此，如果您设置了一个图标，有时他们会使用一个带有所有图标的图像，并只显示其中一个图标，方法是将画布大小更改为一个图标的大小，将位置更改为正确的图标。这样可以避免加载100个图标。

HTML图像，而不是CSS图像，可以通过Javascript进行更改和播放。如果您愿意，甚至可以编辑它们。

您可以在此处详细了解： When to use IMG vs. CSS background-image?

我通常会这样想：

我需要在此图片上方放置元素吗？ - 可能是CSS背景图片
您有时需要只显示部分图像吗？ - 可能是CSS背景
我是否需要与此图片进行互动？ - 可能是<image>标签。
用户打印页面时是否需要打印图像？ - 明确<image>标签。

Answer 2

.jumbotron {
    background-image: url('https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/jumbotron.jpg');
}

和

<div class="jumbotron">
    <img src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/jumbotron.jpg">
</div>

不是一回事。

CSS方法将您的图片作为background添加到.jumbotron元素，而HTML方法将新图像元素（img）添加到您的文档对象模型（{{1 }}）。

CSS代码的HTML等价物是：

DOM

但是，我不鼓励将CSS规则直接写入<div class="jumbotron" style="background-image: url('https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/jumbotron.jpg');"></div>。

Answer 3

一个是名为CSS的{{1}}属性。

https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

另一个是名为background-image的{{1}}元素。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

在css和js中使用img src和img url

3 个答案: