如何使文本显示在该引导轮播中的叠加层上方？

Question

I'm currently working on a project and I want to use this full screen carousel ( http://bootsnipp.com/snippets/ZkRvj ). I'm currently using the latest bootstrap 3 version (3.3.7) however this particular snippet was built for 3.2.0.

(If you change the bootstrap version in bootsnipp to the latest, you can also replicate the problem)

The issue I am having is that the DIV .overlay used to darken the background of each slide in the carousel is also overlapping the text and button which means the text and button is also getting darkened. I have tried giving the .hero class (used for the text and button) and the child elements a higher z-index however this does not fix the problem. I have also tried lowering the overlay z-index but this also doesn't work.

This issue does not show in bootstrap 3.2.0 but in 3.3.7 it does and I have no idea how to get around this issue.

Thanks

Answer 1

I don't know why the change in bootstrap version should give this issue, though it obviously does...

I got around your problem using 3 steps:

1) Give .carousel-inner a background-color: #000; .

2) Delete the '.overlay' div.

3) In your .slide-x rule (where you set the background image), add opacity: 0.4; .

Basically, this makes the image semi opaque, but not your hero. As you can see through the image to the (now) black background of the slide container you get exactly the same effect without the z-index heartache.