Transparent background with non-transparent button

Question

I have a caption area over an image with a semi-transparent background. Within the caption area there's a button. I want the button to be non-transparent, but not sure how to do this.

http://dailyspiro.com/index.html

    <div class="col-md-12 landing-container">
        <img src="images/pig.jpg" class="main-image" width="70%">
        <div class="uvp">
        <h1>Spread Compassion & Track Your Impact</h1>
        <button class="join-button">Join Now</button>
        </div>
    </div> 

.uvp {
    background: rgb(66,51,51);
    opacity: .8;
    ...
}

.uvp h1 {
    color: #fff;
    ...
}

.join-button {
    background: rgb(48, 118, 213);
    ...
}

Answer 1

Opacity will apply to the element with .uvp and all its children. Have you tried background: rgba(66,51,51,0.8) instead?

You also need to place the image behind the .uvp You could do it with position: relative; z-index: -1; for the image.

A better solution might be background: url(images/pig.png) center center no-repeatfor .container but then you need to take care of the height of .container yourself and the background-size, with background-size: contain.

Answer 2

you need use the z-index to put the transparent area back and the non-transparent to front eg: `

background: rgb(66,51,51);
opacity: .8;
position:absolute;
z-index:-1;

`

background: rgb(48, 118, 213); //if you want couldn't no change this class"

Answer 3

just change

.uvp {
    background: rgb(66,51,51);
    opacity: .8;
    ...
}

.uvp h1 {
    color: #fff;
    ...
}

.join-button {
    background: rgb(48, 118, 213);
    ...
}

to

.uvp {
    background: rgba(66,51,51,.8);
    ...
}

.uvp h1 {
    color: #fff;
    opacity: 0.8;
    ...
}

.join-button {
    background: rgb(48, 118, 213);
    ...
}