Как показать изображение из класса на теге изображения

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