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

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 class 替换为以下内容：

.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(...)）

希望对您有所帮助。

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

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

html

css

opacity