Ho una pagina blu scuro e quando l'immagine si sta caricando (o manca) il testo ALT è nero e difficile da leggere (in FF).Posso modificare il testo ALT di un'immagine con i CSS?
Posso personalizzare (con CSS) per essere bianco?
Impostazione del tag imgcolor funziona
img {color:#fff}
body {background:#000022}
img {color:#fff}<img src="http://badsrc.com/blah" alt="BLAH BLAH BLAH" />Non puoi assegnare l'attributo alt direttamente in css. Tuttavia l'alt erediterà lo stile della voce della alt è acceso o ciò che viene ereditato dal suo genitore:
<div style="background-color:black; height: 50px; width: 50px; color:white;">
<img src="ouch" alt="here i am"/>
<div>
Nell'esempio precedente, il testo alt sarà nero. Tuttavia con il colore: bianco il testo alt è bianco.
Certo che puoi!
faccio questo come ripiego per le immagini di intestazione logo, penso che alcune versioni di IE non rimarranno. Modifica: O Chrome apparentemente - Non ho nemmeno vedere il testo alt nella demo (?). Firefox funziona bene comunque.
img {
color: green;
font: 40px Impact;
}<img src="404" alt="Alt Text">A partire dal 2018, sto vedendo che bene in Chrome troppo. Una cosa che noto è che la decorazione del testo non è applicabile a nessun browser che ho controllato. –
È possibile utilizzare img[alt] {styles} per applicare solo il testo alternativo.
Questo non si concentra sul testo alternativo, ma su qualsiasi elemento immagine che contiene attributo alt. –
È possibile utilizzare una classe sull'immagine o un'espressione regolare su src per indirizzare l'immagine specifica. Semplice css amico mio. – katsampu
katsampu, la domanda iniziale ha riguardato il targeting del testo alternativo, nella tua risposta stai parlando di "solo lo stile del testo alternativo". Questa affermazione non è corretta. Questo non ha come target il testo, ma l'elemento dell'immagine che lo circonda. Se imposto img [alt] {border: 1px rosso fisso, padding: 10px;} tali modifiche influenzano l'immagine stessa, non il testo alt. Alcune modifiche possono essere ereditate anche nel testo alternativo (a seconda dell'implementazione del browser). Ma non solo lo stile del testo alt come hai detto tu. Stilizza solo elementi di immagine con attributo alt text. Vedi la differenza? –
In Firefox e Chrome (e possibilmente di più) possiamo inserire la stringa '(....)' nel testo alternativo di un'immagine che non è stata caricata.
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 - " />come questa domanda è il primo risultato nei motori di ricerca
ci sono un problema con il selezionato -e proprio dalla soluzione modo-, è che se si desidera aggiungere stile che si applicherà a immagini come (bordi per esempio).
ad esempio:
img {
color:#fff;
border: 1px solid black;
padding: 5px;
background-color: #ccc;
}<img src="http://badsrc.com/blah" alt="BLAH BLAH BLAH" /> <hr />
<img src="https://cdn4.iconfinder.com/data/icons/miu-square-flat-social/60/stackoverflow-square-social-media-128.png" alt="BLAH BLAH BLAH" />come si può vedere, tutte le immagini applicherà lo stesso stile
c'è un altro approccio al lavoro facilmente intorno ad un problema, utilizzando onerror e inserendo alcune classi speciali per gestire le immagini interrotte:
.invalidImageSrc {
color:#fff;
border: 1px solid black;
padding: 5px;
background-color: #ccc;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<img onerror="$(this).addClass('invalidImageSrc')" src="http://badsrc.com/blah" alt="BLAH BLAH BLAH" /> <hr />
<img onerror="$(this).addClass('invalidImageSrc')" src="https://cdn4.iconfinder.com/data/icons/miu-square-flat-social/60/stackoverflow-square-social-media-128.png" alt="BLAH BLAH BLAH" />
+1 per rispondere alla domanda ** esatta **. :) – Sumo
Ero solito farlo quando avevo 9 anni con '![]()
'. Amico quelli erano i giorni. –
BoltClock