如何只降低背景的不透明度而不是其中的文本？

Question

嗯，我有一个不透明度较低的白色背景。但是其中的文本和声音云小部件的不透明度也较低。如何让不透明度只影响背景？

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

Answer 1

您需要 - 将不透明度应用于 背景 而不是整个元素。

将.music css 类替换为以下内容：

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

（删除opacity和background-color并添加background:rgba(...)）

希望有帮助。