背景图片不显示

Question

我已经尝试按照 W3schools 上的教程进行操作，并且还在我负责克隆的网站上深入研究了开发人员工具，并且当我不得不做一个 background image.

我知道这是用户错误，但我卡住了。

我的 HTML 看起来像这样：

<section class="introduction">  <img src="background-image">

我的 CSS 看起来像这样：

.introduction {
  background-image: url('../images/karma-background.jpg'); 
}

Answer 1

您需要设置 height 和 width 才能使 background-image 正常工作

.introduction {
  background-image: url('//dummyimage.com/200x200'); 
  height:200px;
  width:200px;
}

<section class="introduction">This text has a background image</section>

或者您可以像在代码中那样简单地使用 img src，但不会是 background

img {
  height: 200px;
  width: 200px;
}

<section class="introduction">
  <img src="//dummyimage.com/200x200" />
</section>

Answer 2

您不需要图像对象

<img src="...">

css 背景图片也是如此。

<section class="introduction"></section>

.introduction {
background-image:url('../images/karma-background.jpg'); 
}

所以实际上问题是你没有像我在我的例子中那样结束你的部分标签。您可能需要添加额外的 css 以调整尺寸

Answer 3

这里有一些新编码员的学习机会。

首先，让我们看看您的 <img> 标签。图像标签的 src 属性用于引用实际的图像文件。要使用它，您可能会说：

<img src="../images/karma.jpg" />

一个等效但不太常见的表达式是：

<img src="../images/karma.jpg"></image>

在您的示例中，您有属性 src="background-image"，这表明您正在尝试将其用作 class 或 style 属性。在某些情况下，这可能是在正确轨道上迈出的一步，但这里不是。

<img> 标签实际上是为前景中的内容图像设计的。因为您专门尝试使用图像作为背景，所以您的 CSS 是引用背景图像的最佳位置。因此，您拥有的 <img> 标签是不必要的，并且可能会导致您感到困惑。

这是一种可以让您的代码正常工作的变体：

<section class="introduction">
     Lorum ipsum dolor sit amet
</section>

.introduction {
    background-image: url('../images/karma-background.jpg');
}

通过在开始和结束 <section> 标签之间包含任何类型的内容，浏览器知道有多少 space 需要用背景填充，并将使用部分或全部文件 karma-background.jpg 来填充它。或者，您可以硬编码您想要填充背景图像的大小：

.introduction {
    background-image: url('../images/karma-background.jpg');
    height: 100px;
    width: 100px;
}

背景图片不显示

Background image doesn't show up

html

css

background-image