0

Well, I have a white background with a lower opacity. But the text and soundcloud widgets in it also get a lower opacity. How to make the opacity only affect the background?

html:

<div class="music">
            <h1>Music I used</h1>

            <h3>On this page you can find all the music I used in my skill compilations</h3>

                <div class="song-1">
                    <iframe width="350" height="350" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/117698423&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>
                </div>

                <div class="song-2">
                    <iframe width="350" height="350" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/164076894&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>
                </div>
        </div>

css:

.music {
        background-color: white;
    opacity: .6;
    width: 800px;
    min-height: 900px;
    position: absolute;
    left: 524.5px;
    right: 524.5px;
}

.song-1 {
    position: absolute;
    left: 30px;
    float: left;
}

.song-2 {
    float: right;
    position: absolute;
    right: 30px;
}
.music h1 {
    text-align: center;
}

.music h3 {
    text-align: center;
}
LogicLucas
  • 15
  • 4
  • possible duplicate of [Transparent background, but not the content (text & images) inside it, in CSS only?](http://stackoverflow.com/questions/806000/transparent-background-but-not-the-content-text-images-inside-it-in-css-on) – Weafs.py Jan 11 '15 at 10:12

1 Answers1

1

what you need - is to apply the opacity on the background instead of on the whole element.

replace .music css class with the following:

.music {
    background:rgba(255,255,255,0.6);
    width: 800px;
    min-height: 900px;
    position: absolute;
    left: 524.5px;
    right: 524.5px;
}

(removed opacity and background-color and added background:rgba(...))

hope that helps.

geevee
  • 5,411
  • 5
  • 30
  • 48