Question

我曾尝试过关于W3schools的教程，我也在我负责克隆的网站上挖掘了开发人员工具，并且当我不得不做{{{{{ 1}}。

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

我的HTML看起来像这样：

background image

我的CSS看起来像这样：

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

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

或者您可以像在代码中一样使用img src，但不会成为background

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

首先，让我们看一下您的<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>标记之间包含任何类型的内容，浏览器知道需要用背景填充多少空间，并将使用部分或全部文件{{1}填补它。或者，您可以硬编码您想要填充背景图像的大小：

karma-background.jpg

Answer 3

您不需要图像对象

<img src="...">

css和背景图像就像这样工作。

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

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

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

背景图像不会显示出来

3 个答案: