CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Grizzly
Grizzly

Reputation: 5953

Background Opacity

I am using the carousel, for my web application.

Obviously I am shuffling images in the carousel, but the text becomes very difficult to read for the user.

So I figured that I could give the div that contains the text a background color and give it a medium-low opacity, but that will also force the text itself to become transparent.

I have used this reference to try and render a solution to my issue but it does not rectify my issue. This solution doesn't make the background transparent at all which cuts off a quarter of my image.

Here is my CSHTML:

<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>
    <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>

CSS:

.carousel-caption {
    background-color: rgba(222,222,222,.5);
    border: 2px solid rgba(222,222,222,.5);
}

So to be clear.. how do I keep the text opaque but the background of the div transparent so that it doesn't cut off a portion of my image?

Upvotes: 0

Views: 92

Answers (1)

leigero
leigero

Reputation: 3283

I don't understand what's wrong with what you have. Just style the font without opacity?

.carousel-caption {
    background-color: rgba(100,222,300,.2);
    border: 2px solid rgba(100,200,300,.2);
}
.carousel-caption p, .carousel-caption h1{
  color: blue;
}

JSFiddle

Upvotes: 1

Related Questions