如何显示的图像标签

Question

我在我的HTML图像标记从一个类的图像：

<img class="fruit1" /> 

，并在我的CSS如下：

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

，但我无法得到要显示的实际图像，这是在CSS中分配图像的正确方法，并让它显示在视图中？

Answer 1

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

<img class="fruit1" /> 

Answer 2

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

<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 3

在实践中，如果图像是页面的内容的一部分，您应该使用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 */ 
}