Make text readable on arbitrary background image

Question

I am using the carousel component from the new Bootstrap 3 RC2. However, I noticed that in practice the caption is often not readable because my pictures very a lot in color. The previous Bootstrap 2.3 used a black gradient for captions but that seems to have been removed.

What would be a way to style my caption with CSS to make them readable against arbitrary images? I have tried to play with shadow and background-color, but that just gets incredibly ugly.

Here some example code: http://bit.ly/1eX8Tz9

Answer 1

In order to get the content displayed on the gray semi-transparent background

Just Add the following code to your css

.carousel-caption{
    background: rgba(0,0,0,0.5);
}

See the Demo Here