Question

我的html中有一个图片标记：

<img class="fruit1" />

以及我的css中的以下内容：

.fruit1 {
  background-image: url('./images/apple.png');
}

但是我无法显示实际图像，这是在css中分配图像并将其显示在视图中的正确方法吗？

Answer 1

如果您将图像作为背景图像，也可以使用图像的宽度和高度。在这种情况下，你不应该有一个图像标签

<div class="fruit1" ></div>


.fruit1 {
  background-image: url('./images/apple.png');
  width: 200px;
   height: 200px
}

正如您所做的那样只使用HTML显示它;

<img class="fruit1" src= "./images/apple.png" width="200px" height="200px" />

Answer 2

在实践中，如果图像是页面内容的一部分，则应使用src属性：

<img class="fruit1" src="images/apple.png" />

传统上，背景图片通过替换适当的文本（通常是标题）来增强内容：

<h2 class="apples">Our Apples</h2>

.apples {
  background-image: url('./images/apple.png');
  width: 100px;
  height: 100px;
  text-indent: -99999px; /* hide the text with a negative text-indent */
}

Answer 3

<style>
.fruit1 {
  background-image: url('./images/apple.png');
    height:100px;
    width:100px;
    background-repeat:no-repeat;
}
</style>

<img class="fruit1" />

如何在图像标签上显示类中的图像

3 个答案: