如何顯示的圖像標籤

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 */ 
}