Text Transparency on Bootstrap Carousel Background

Taking one step further on my previous post, we now display text with transparency effect on Bootstrap carousel.

The carousel in its original format can be viewed on http://getbootstrap.com/examples/carousel/

The URL below demonstrates text transparency on Bootstrap carousel background on my portfolio website:
http://jundolor.eu5.org/bootstrapsamples/carousel01/

Feel free to download the files. The carousel as it appears on my laptop is shown below:

The carousel as it appears on my mobile is shown below:

Like the previous post, we remove or comment out the <img> tags before div class .container within the carousel. The <p> tags surrounding the buttons are replaced with <div> tags. In a while, css transparency on <p> and <h> tags will be applied. The buttons are to display with no transparency.

    <div class="carousel-inner">
        <div class="item">
          <!--<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">-->
          <div class="container">
            <div class="carousel-caption">
     <h1>Example headline.</h1>
     <p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
     <div><a class="btn btn-lg btn-primary" href="http://getbootstrap.com/examples/carousel/#" role="button">Sign up today</a></div>
            </div>
          </div>
        </div>
        <div class="item active">
          <!--<img src="data:image/gif;base64,R0lGODlhAQABAIAAAGZmZgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">-->
          <div class="container">
            <div class="carousel-caption">
              <h1>Another example headline.</h1>
     <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
     <div><a class="btn btn-lg btn-primary" href="http://getbootstrap.com/examples/carousel/#" role="button">Learn more</a></div>
            </div>
          </div>
        </div>
        <div class="item">
          <!--<img src="data:image/gif;base64,R0lGODlhAQABAIAAAFVVVQAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">-->
          <div class="container">
            <div class="carousel-caption">
              <h1>One more for good measure.</h1>
     <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
     <div><a class="btn btn-lg btn-primary" href="http://getbootstrap.com/examples/carousel/#" role="button">Browse gallery</a></div>
            </div>
          </div>
        </div>
      </div>

The next step is to prepare the image for the carousel background. The fountain photo was taken during our visit to Fort Santiago :-)

The carousel comes with a stylesheet, carousel.css. Add the styles below. The <p> and <h> tags in the carousel are given a transparency effect. The fountain image is set as the background image. Originally, the text in the carousel have light color- a style declaration for class .carousel-caption converts color to black. Make changes as needed to adopt to your style and taste.

.carousel .carousel-inner {
/*Note url should point to where the image is relative to the css*/
background: url('../images/fountain.png') no-repeat center center;
background-color:#fff;

}
.carousel .carousel-inner .item .container .carousel-caption{
color:black;
}
.carousel .carousel-inner .item .container .carousel-caption h1, .carousel .carousel-inner .item .container .carousel-caption  p{
 background-color:#fff;
 opacity: 0.7;
 border: 2px solid;
    border-radius: 5px;
}

That should now display the carousel text with transparent effect while keeeping a background image.

Need help on some web coding task? Let me know about it. Email me at jrwxpun.dolor@gmqoapmssail.co57agsblm and I'll be more than happy to blog about it with my thoughts.