背景の不透明度を低くし、テキストを低くする方法はありますか？

debugcn 投稿 Dev

LogicLucas

さて、私は不透明度の低い白い背景を持っています。ただし、その中のテキストウィジェットとsoundcloudウィジェットの不透明度も低くなります。不透明度を背景にのみ影響させるにはどうすればよいですか？

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

ギーブ

必要なのは、要素全体ではなく、背景に不透明度を適用することです。

.musiccssクラスを次のように置き換えます。

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

それがお役に立てば幸いです。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]