Background Opacity

Question

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?

See http://stackoverflow.com/questions/806000/how-do-i-give-text-or-an-image-a-transparent-background-using-css — Rachel S, May 10 '16 at 17:52
Weird. Changing `background-color` to a semi-transparent value shouldn't change the text opacity. Are you sure you don't have an opacity defined in another line of your CSS? By the way, you could try `text-shadow` to enhance readability. See http://css3gen.com/text-shadow/ — Dimas Pante, May 10 '16 at 18:07

leigero · Accepted Answer · 2016-05-10T17:57:12.950

1

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

edited May 10 '16 at 17:57

answered May 10 '16 at 17:55

leigero

3,233
12
42
63

this is not an answer, should be a comment – dippas May 10 '16 at 17:57
@dippas This is the answer. The question doesn't warrant a huge answer. They just want to style the font so that it's not transparent. – leigero May 10 '16 at 17:57
turns out.. even when I closed and reopened my app.. for some reason my css/html wasn't rendering properly so I `f5`'d and it worked. but thanks +1 – Grizzly May 11 '16 at 19:08

Background Opacity

1 Answers1