How to only make the opacity lower for the background and not the text in it?


Tags: html,css,opacity

Problem :

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;
}


Solution :

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.


    CSS Howto..

    How to write css fallbacks for vh vw

    How can I change CSS Class of a textbox on failed Validation and then again change it back on successful validation?

    How to make the background color transparent

    How to style form elements unobtrusively with JavaScript and CSS?

    How can I skin / theme a windows forms application [closed]

    I'm acquiring a VARCHAR variable through php, and want to show it using HTML/CSS. How do I auto format it so that it isn't one long sentence

    How do I left pad a div in a JavaFX WebView?

    How can I set the CSS class of an element in a Rails view?

    How to avoid gaps using Isotope with Masonry layout sortby random

    How to choose second and third element (li) in
      tag (with CSS)?

    How to create a variable from CSS class attribute?

    How do I correct this CSS fluid layout glitch?

    slideshow banner without using flash

    How to change the Menu colour when selected?

    How to fit label “css width”

    How to change the label color by its id with css?

    css code how to remove space between div class

    how to render tilted images in html or css or javascript ..?

    How to fix a element (have example) on the screen using jquery /css?

    How to get the current year using css?

    How to make this inner div vertically centered? (Using CSS)

    How to achieve “paper-like” background effect? [closed]

    disabling stylesheets to increase the speed of showing/hiding divs

    How to remove right border

    How to prevent (bootstrap) fixed top navigation from zooming on mobile

    How do you format php error messages? they don't respect css

    How to exclude the container from this javascript code?

    How to horizontally and vertically center two images on top of each other?

    How can I hide the extra list items that don't fit within a fixed-height box?

    how to animate with CSS?