How to make non transparent elements inside a transparent div

Question

I have a bootstrap carousel, that adds the image inline in each carousel-item, and this background image needs to be .4 opacity. But the caption of this carousel-item needs to be 1 opacity. Is there any way i can do this?

    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner" role="listbox">

            <!-- Slide One - Set the background image for this slide in the line below -->
            <div class="carousel-item active" style="background-image: url('img/banner.jpg')">
                <div class="carousel-caption d-none d-md-block">
                    <h2 class="display-4">First Slide</h2>
                    <p class="lead">This is a description for the first slide.</p>
                </div>
            </div>

        </div>
    </div>

It‘s not tested, but how is it with filters? img {filter: opacity(30%);} Not sure if it is inherited. — Maximilian Fixl, Sep 11 '19 at 20:36
@MaximilianFixl didn't works =( it works exaclty the same way as opacity — Tiago P.C, Sep 11 '19 at 20:42
i found the solution in this answer: https://stackoverflow.com/a/27505936/5551480 i'm closing this question — Tiago P.C, Sep 11 '19 at 20:53

score 0 · Answer 1 · answered Sep 11 '19 at 20:38

0

Opacity has a default initial value of 1. Opacity is not inherited, but because the parent has opacity that applies to everything within it. You cannot make a child element less transparent than the parent, without some tricks

the child element would not stay as child just change it's position on your html code and then just add css property on that previous child:

.child {
    position : relative;
    top : 5rem;
}
.parent {
    opacity : 0;
}

I hope this would be useful

answered Sep 11 '19 at 20:38

STA Yassine

1

I cant use it, because the child element needs to be inside the parent element to the carousel works =( – Tiago P.C Sep 11 '19 at 20:41
Then you can't reach what you want =( – STA Yassine Sep 11 '19 at 20:43

How to make non transparent elements inside a transparent div

1 Answers1