Puis-je styliser le texte ALT d'une image avec CSS ?

Question

J'ai une page bleu foncé et lorsque l'image se charge (ou manque), le texte ALT est noir et difficile à lire (dans FF).

Pourrais-je le styliser (avec CSS) pour qu'il soit blanc ?

Answer 1

Fixer le img étiquette color travaux

img {color:#fff}

http://jsfiddle.net/YEkAt/

body {background:#000022}
img {color:#fff}

<img src="http://badsrc.com/blah" alt="BLAH BLAH BLAH" />

Answer 2

Bien sûr que vous pouvez !

http://jsfiddle.net/VfTGW/

Je fais cela comme solution de repli pour les images du logo de l'en-tête, je pense que certaines versions d'IE ne le supporteront pas. Modifier : Ou Chrome apparemment - je n'ai même pas voir alt text dans la démo( ?). Firefox fonctionne bien cependant.

img {
  color: green;
  font: 40px Impact;
}

<img src="404" alt="Alt Text">

Answer 3

Vous ne pouvez pas donner un style à l'attribut alt directement en css. Cependant, l'attribut alt hérite des styles de l'élément sur lequel il se trouve ou de ce qui est hérité par son parent :

    <div style="background-color:black; height: 50px; width: 50px; color:white;">
    <img src="ouch" alt="here i am"/>
    <div>

Dans l'exemple ci-dessus, le texte alt sera noir. Cependant, avec l'option color:white, le texte alt est blanc.

Answer 4

Dans Firefox et Chrome (et peut-être plus), nous pouvons insérer la chaîne "( .... )" dans le texte alt d'une image qui n'a pas été chargée.

img {
  font-style: italic;
  color: #c00;
}

img:after {
  content: " (Image - Right click to reload if not loaded)";
}

img::after {
  content: " (Image - Right click to reload if not loaded)";
}

<img alt="Alt text - " />

Answer 5

Vous pouvez utiliser img[alt] {styles} pour styliser uniquement le texte alternatif.