Why is the button colour being affected by the background?

Question

I have a site with a gradient background. That works fine. But, when I add a button to it, the colour changes to the one on the background. This is my CSS:

BTW, open the snippet on full-page, or it won't look clear

const leftSide = document.getElementById("playerLeft");
const rightSide = document.getElementById("playerRight");
const newGame = document.getElementById("newGame");

function setSelectedPlayer(position) {
    switch (position) {
        case 1:
            rightSide.style.backgroundColor = "#ffffff80"
            leftSide.style.backgroundColor = "#fff"
            break;
        case 2:
            leftSide.style.backgroundColor = "#ffffff80"
            rightSide.style.backgroundColor = "#fff"
            break;
    }
}

newGame.onpointerdown = function () {
    newGame.style.top = "10px";
}

newGame.onpointerup = function () {
    newGame.style.top = "-10px";
}

<!DOCTYPE html>
<html>

<head>
    <title>Pig Game!</title>

    <style>
        body {
            background-image: linear-gradient(90deg, hsla(217, 100%, 50%, 1) 0%, hsla(186, 100%, 69%, 1) 100%);
            align-items: center;
            font-family: sans-serif;
        }

        #parent {
            height: 70%;
            width: 70%;
            opacity: 30%;
            position: absolute;
            top: 20%;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }

        #title {
            color: white;
            position: absolute;
            top: 10%;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            text-align: center;
            font-size: 250%;
        }

        #playerLeft {
            width: 50%;
            height: 100%;
            border-radius: 10px 0 0 10px;
            float: left;
        }

        #playerRight {
            width: 50%;
            height: 100%;
            border-radius: 0 10px 10px 0;
            float: left;
        }

        .activePlayer {
            background-color: rgba(255, 255, 255, 1);
        }

        .inActivePlayer {
            background-color: rgba(255, 255, 255, 0.5);
        }

        .button {
            border-radius: 40px;
            border-color: white;
            border-style: solid;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            width: 20%;
            height: 10%;
            margin: auto;
            background-color: white;
        }
    </style>
</head>

<body>

    <h1 id="title">Pig Game!</h1>

    <div id="parent">
        <div class="activePlayer" id="playerLeft">

        </div>

        <div class="inActivePlayer" id="playerRight">

        </div>

        <button type="button" class="button buttonNewGame" id="newGame">Hi</button>
    </div>

    <script src="script.js"></script>
</body>

</html>

And the button with the text hi is not appearing white. Why is that so? And how can I make it white?

score 3 · Accepted Answer · answered Jul 07 '22 at 14:00

3

The opacity of #parent is 30% so it and everything inside it is translucent.

If you wanted to set the background of #parent to be translucent, then use a background-color with an alpha channel, don't use opacity.

answered Jul 07 '22 at 14:00

Quentin

914,110
126
1,211
1,335

Why is the button colour being affected by the background?

1 Answers1