Cómo añadir texto a imágenes por CSS y que se lea bien

Hace unos días os explicamos cómo poner texto en una imagen con GIMP, para que se pueda leer correctamente. Hoy hacemos lo mismo con CSS, para hacerlo en una web. Por ejemplo en un Slider.

Suponemos que el texto no se ve bien en toda o en parte de la imagen. La idea es la misma, podemos:

Poner un color de fondo con transparencia en el div de texto. Para que quede como esto:

La idea es sencilla. Identifica el div del texto o dale un id. Luego en ese id en la página de estilos pon:
background-color {rgba(0, 0, 0, 0.25)}
Recordad que tenéis que poner el color en formato rgba para usar transparencia. En este comando los 3 primeros números son el color (como veis yo suelo usar el negro), y el último es el grado de transparencia (aquí 0.25). Con ese último es con el que tenéis que jugar.
Recomiendo usar Inspeccionar de Chrome o Inspeccionar elemento de Firefox. Ahí podrás ver los cambios en tiempo real antes de ponerlos en el código.
Puedes hacer un blur en la capa de texto. Es decir, difuminar la de debajo donde esté la capa de texto. Para eso poner este comando en esa capa de texto:
{-webkit-filter: blur(12px);
filter: blur(12px);}
Poner una capa intermedia (div) de color con transparente entre el texto y la imagen. Como en la imagen por GIMP, si no queréis que quede el recuadro anterior, podéis hacer lo mismo pero cubriendo toda la imagen.
Sólo tenéis que poner un div entre el texto y la imagen, del mismo tamaño (y posición) que esta última.
En ese div intermedio poner :
background-image: linear-gradient(
rgba(0, 0, 0, 0.2),
rgba(0, 0, 0, 0.2));}

Este comando es parecido al anterior, pero crea un gradiente de color. En este caso hemos dejado todo el fondo igual. Para ayudarte puedes usar un generador online de gradiente lineal como este o este.
Obviamente podéis cambiar los colores tanto de principio como de final.
Quedaría algo así:
Y como en el caso de las imágenes, también podéis poner una sombra en el texto.
Para ello en la clase del texto poner:
{ text-shadow: 0 1px 0 black; }