альтернативный текст получить на экране изображение

меня написать <img> тег так:альтернативный текст получить на экране изображение

<img id="image1" alt="image1" />

И код КСС:

#image1 { 
    background-image: url("../images/home-page/image1.jpg"); 
    background-size: 100% 100%; 
    position: absolute; 
}

На моей веб-страницы изображение и текст атрибута Alt в обоих получает отображается. Если изображение присутствует, я не хочу отображать текст alt. Не знаю, в чем проблема. Может ли кто-нибудь знать, как его решить? И в чем проблема?

источник

2016-07-05 Tejashri Bedarkar

Лучшее объяснение здесь - http://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image и другой здесь http://stackoverflow.com/questions/ 17288500/img-vs-background-image-css-in-performance – Pugazh

Дайте изображению атрибут 'src' и удалите фоновое изображение ...? – CBroe

Я использовал разные размеры изображений для разного разрешения. Если я использовал 'src', то как я могу изменить это изображение? Он всегда использует изображение, указанное в атрибуте 'src'. –

Он отображает текст alt, потому что изображение не загрузилось. Изображение не загрузилось, поскольку оно не имеет атрибута src.

Если вы хотите изображение контента, используйте атрибут src.
Если вы хотите фоновое изображение, то не используйте элемент <img>.

Я использовал различные размеры изображений для разных разрешений.

Затем вы хотите the <picture> element:

<picture> 
    <source 
    media="(min-width: 650px)" 
    srcset="images/kitten-stretching.png"> 
    <source 
    media="(min-width: 465px)" 
    srcset="images/kitten-sitting.png"> 
    <img 
    src="images/kitten-curled.png" 
    alt="a cute kitten"> 
</picture>

Пример через HTML5 Rocks

источник

2016-07-05 07:16:16 Quentin

Дополнительная информация и полипол: https://scottjehl.github.io/picturefill/ – gcampbell

Насколько я знаю, вы можете использовать атрибут alt только с атрибутом src. Исключая src, вы всегда будете показывать alt (как это происходит в вашем примере). Так что в вашем случае, вы могли бы сделать что-то вроде этого:

<img id="image1" alt="image1" src="../images/home-page/image1.jpg" /> 

#image1 { 
/* This is obsolete, as @Pugazh already mentioned (you better use fix values) */ 
    background-size: 100% 100%; 
    position: absolute; 
}

Вы также можете увидеть this fiddle.

источник

2016-07-05 07:14:14 Aer0

Добавляя 'src' к изображению,' background-size: 100% 100%; 'ничего не значит. Вы должны указать 'width' и' height' для управления размером изображения. – Pugazh

Вы в значительной степени правы. В этом случае это отчасти устарело, но я использовал только его общий фрагмент для демонстрационной цели. – Aer0

alt атрибут задает альтернативный текст для изображения, если изображение не может быть отображен.

Здесь в этом сценарии alt отображается как src is mising.

Я мог бы придумать 2 решения.

Оставьте alt текст пустым, если вы не хотите видеть текст.
Используйте div и укажите background-image.

источник

2016-07-05 07:29:28 Pugazh

альтернативный текст получить на экране изображение

ответ

Смежные вопросы