Alt-Text auf das Bild angezeigt bekommen

ich <img> Tag wie folgt schreiben:Alt-Text auf das Bild angezeigt bekommen

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

und CSS-Code ist:

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

auf meiner Web-Seite Bild und Text des alt-Attribut beide angezeigt wird. Wenn ein Bild vorhanden ist, möchte ich keinen alternativen Text anzeigen. Ich weiß nicht, was das Problem ist. Kann jemand wissen, wie man es löst? Und was ist das Problem?

Quelle

2016-07-05 Tejashri Bedarkar

bessere Erklärung hier - http://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image und hier eine andere http://stackoverflow.com/questions/ 17288500/img-vs-hintergrundbild-css-in-performance – Pugazh

Geben Sie dem Bild ein Attribut 'src' und entfernen Sie das Hintergrundbild ...? – CBroe

Ich habe verschiedene Größen von Bildern für unterschiedliche Auflösung verwendet. Wenn ich 'src' verwende, wie kann ich dann das Bild ändern? Es verwendet immer das Bild, das im Attribut 'src' angegeben ist. –

Es wird der Alt-Text angezeigt, da das Bild nicht geladen werden konnte. Das Image konnte nicht geladen werden, da es kein src-Attribut aufweist.

Wenn Sie ein Inhaltsbild möchten, verwenden Sie ein src Attribut.

Wenn Sie ein Hintergrundbild möchten, dann verwenden Sie kein Element.

Ich habe verschiedene Größen von Bildern für unterschiedliche Auflösung verwendet.

Dann möchten Sie 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>

Beispiel über HTML5 Rocks

Quelle

2016-07-05 07:16:16 Quentin

Weitere Informationen und Polyfill: https://scottjehl.github.io/picturfill/ – gcampbell

Soweit ich weiß, können Sie das Attribut alt nur mit einem src Attribut verwenden. Mit Ausnahme der src wird immer die alt angezeigt werden (wie es in Ihrem Beispiel passiert). Also in Ihrem Fall, würden Sie etwas wie folgt aus:

<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; 
}

Sie auch this fiddle sehen können.

Quelle

2016-07-05 07:14:14 Aer0

Beim Hinzufügen von 'src' zum Bild bedeutet' background-size: 100% 100%; 'nichts. Sie sollten "Breite" und "Höhe" angeben, um die Bildgröße zu steuern – Pugazh

Sie sind ziemlich genau richtig. In diesem Fall ist das irgendwie veraltet, aber ich habe sein gemeinsames Snippet nur zu Demonstrationszwecken benutzt. – Aer0

alt Attribut einen alternativen Text für ein Bild angibt, ob das Bild nicht angezeigt werden kann.

Hier in diesem Szenario alt als src angezeigt wird mising.

Ich könnte mir 2 Lösungen vorstellen.

alt Text leer Halten Sie, wenn Sie einen beliebigen Text nicht sehen möchten.
Verwenden Sie eine div und geben Sie background-image an.

Quelle

2016-07-05 07:29:28 Pugazh

Alt-Text auf das Bild angezeigt bekommen

Antwort

Verwandte Themen