Texto no muy legible en diferentes fondos de imagen

He venido aquí en busca de un poco de ayuda de diseño o consejos sobre cómo podría mejorar lo siguiente:

Como dice el título, tengo un banner de sitio web con varios textos que se muestran en diferentes imágenes como fondos. Ahora, dado que la mayoría de las imágenes son oscuras, configuré el color de la fuente en blanco. Pero incluso entonces, parte del texto no es muy legible en un par de imágenes como:

estándar

Como estoy trabajando con CSS, he probado diferentes opciones como:

Agregar sombras de texto:

con sombra de texto

CSS:

text-shadow: 3px 3px 0px #000;

También probé, creando un cuadro semitransparente alrededor del texto:

con fondo semitransparente

Manifestación

Siento que la caja uno se ve fuera de lugar.

He creado un violín para cualquiera que sepa CSS. Si no es así, no dude en aconsejarme basándose únicamente en su imaginación.

PD: También podría aconsejarme sobre el uso de una fuente diferente si eso ayudara a que se destaque mejor.

Un brillo exterior negro suave en su texto (sombra en todas las direcciones) a veces puede ser suficiente para darle más contraste sin que parezca que ha puesto algo detrás.
@John También pensé en el brillo, pero sin tener mucho efecto de brillo, el problema del texto no legible persiste y, dado que estoy trabajando en un sitio web corporativo, decidí tacharlo porque se vería poco profesional. ¡Gracias por la sugerencia!
Debería haber enfatizado lo sutil que estaba hablando. Como un 20-30% y una amplia difusión donde apenas lo notarías. Si parece un resplandor, o puede ver una transición, es demasiado oscuro. Use solo lo suficiente para hacer que la imagen a su alrededor se desvanezca a un tono ligeramente más oscuro donde se encuentra con las letras.
@John Hmm suena interesante, lo intentaré también.

Respuestas (3)

Como alternativa a las ya excelentes respuestas, ¿qué tal agregar un div negro con un 50% de opacidad detrás del texto?

ingrese la descripción de la imagen aquí

Esto permitiría que la fuente funcione básicamente en cualquier imagen también.

div {
    position:absolute;
    top:250px;
    left:140px;
    width:500px;
    height:50px;
    background-color:black;
    z-index:0;
    opacity:0.5;
}

EJEMPLO

@ICanHasCheezburger ¡No hay problema! Me enfrento mucho al mismo problema al hacer trabajos en sitios web, como imágenes de banners, y descubrí que esta es la forma más agradable de solucionarlo, ya que funciona bien la mayor parte del tiempo.

Sugiero poner la fuente en negrita (solo un cambio de peso, no la fuente en sí) y volver a especificar la sombra para que defina todos los bordes de las letras:

Ejemplo 1

font-family: Raleway;
font-weight:900;
text-shadow: 0px 0px 3px #000;

Incluso puede combinar más de una sombra de texto para crear un contorno definido, así como un desenfoque:

Ejemplo 2

text-shadow: 0px 0px 3px #000, -1px -1px #000, 1px 1px #000;
¡Gracias por tu tiempo! He planeado usar lo text-shadowproporcionado por usted junto con la solución de SaturnsEye.
@Puedo no hacer un cuadro porque dijiste que no lo hiciera. "También intenté crear un cuadro semitransparente alrededor del texto. Siento que el cuadro uno se ve fuera de lugar". Pero tu sitio, tu llamada...
Es cierto, pero después de ver la solución de SaturnsEye me di cuenta de que se veía bien cuando se cambió el tamaño y el color. Perdón por la mala elección de palabras. Quizás debería explicarme mejor la próxima vez.

Dale un fondo negro transparente y algo de relleno.

color de fondo: rgba(0,0,0,0.5);

relleno: 0,5 em;

Simplemente juegue un poco con esos números, pero debería darle un resultado utilizable.

¡Gracias por tu tiempo! Me di cuenta de que si tiene un caso en el que el elemento interno debe tener una opacidad diferente en el exterior, la opacitypropiedad no ayudará en este caso, mientras que establecer la opacidad en la background-colorpropiedad hace el trabajo. como aquí
Texto no muy legible en diferentes fondos de imagen
RespuestasAquíPolítica de privacidad1y, 0v