Tengo una página azul oscuro y cuando la imagen se está cargando (o falta), el texto ALT es negro y difícil de leer (en FF).¿Puedo diseñar el texto ALT de una imagen con CSS?
¿Podría darle un estilo (con CSS) para que sea blanco?
Ajuste de la etiqueta imgcolor funciona
img {color:#fff}
body {background:#000022}
img {color:#fff}<img src="http://badsrc.com/blah" alt="BLAH BLAH BLAH" />No se puede aplicar estilo al atributo alt directamente en css. Sin embargo, el alt heredará los estilos del tema, el alt está encendido o lo que es heredado por su padre:
<div style="background-color:black; height: 50px; width: 50px; color:white;">
<img src="ouch" alt="here i am"/>
<div>
En el ejemplo anterior, el texto alternativo será de color negro. Sin embargo, con el color: blanco, el texto alternativo es blanco.
¡Claro que sí!
hago esto como un mensaje para imágenes del logotipo de cabecera, creo que algunas versiones de IE no estarán eternamente. Editar: O aparentemente Chrome: ni siquiera vea texto alternativo en la demostración (?). Firefox funciona bien, sin embargo.
img {
color: green;
font: 40px Impact;
}<img src="404" alt="Alt Text">A partir de 2018, lo estoy viendo bien en Chrome también. Una cosa que noto es que la decoración de texto no es aplicable en ningún navegador que haya revisado. –
Puede usar img[alt] {styles} para aplicar estilo al texto alternativo.
Esto no se enfoca en el texto alternativo, sino en cualquier elemento de imagen que contenga alt-attribute. –
Puede usar una clase en la imagen o una expresión regular en src para enfocar la imagen específica. Simple css mi amigo. – katsampu
katsampu, la pregunta original que se planteó sobre la orientación del texto alternativo, en su respuesta se trata de "estilo solamente el texto alternativo". Esta declaración es incorrecta. Esto no se dirige al texto, sino al elemento de la imagen que lo rodea. Si configuro img [alt] {border: 1px solid red; padding: 10px;} esos cambios afectan a la imagen en sí misma, no al texto alternativo. Algunos cambios también pueden heredarse en el texto alternativo (dependiendo de la implementación del navegador). Pero no solo te da estilo al texto alternativo como dijiste. Estila solo los elementos de imagen que tienen atributo de texto alternativo. ¿Ver la diferencia? –
En Firefox y Chrome (y posiblemente más) podemos insertar la cadena '(....)' en el texto alternativo de una imagen que no se ha cargado.
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 - " />ya que esta cuestión es el primer resultado en los motores de búsqueda
Hay un problema con el seleccionado -y justo al lado de la solución manera-, es que si desea agregar estilo que se aplicará a imágenes como (bordes, por ejemplo).
por ejemplo:
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" />como se puede ver, todas las imágenes se aplica el mismo estilo
hay otro enfoque para trabajar con facilidad por ejemplo una problema, usando onerror e inyectando alguna clase especial para tratar con las imágenes interrumpidas:
.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 para responder a la pregunta ** exacta **. :) – Sumo
Solía hacer esto cuando tenía 9 años con '![]()
'. Hombre esos fueron los días. –
BoltClock