Background-color com transparência sem afetas os itens dentro | Front-end

Oii Gabrielle, tudo bem?

A solução que você mencionou, utilizando rgba, é a correta, mas talvez tenha faltado algum detalhe na implementação.

Vamos tentar novamente com o rgba. Um exemplo prático de como você pode fazer isso:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Botão com Fundo Transparente</title>
    <style>
        .transparente-btn {
            background-color: rgba(0, 0, 0, 0.5); /* Fundo preto com 50% de transparência */
            color: red; /* Cor do texto */
            border: none; /* Sem borda */
            padding: 10px 20px; /* Espaçamento interno */
            font-size: 16px; /* Tamanho da fonte */
            cursor: pointer; /* Cursor de ponteiro ao passar o mouse */
        }
    </style>
</head>
<body>
    <button class="transparente-btn">Clique Aqui</button>
</body>
</html>

background-color: rgba(0, 0, 0, 0.5); define a cor de fundo usando valores RGBA. Os primeiros três valores (0, 0, 0) representam a cor preta, e o último valor (0.5) representa 50% de transparência.
color: red; define a cor do texto como vermelha.
O resto das propriedades (border, padding, font-size, cursor) são usadas para estilizar o botão de forma adicional.

O 0 (totalmente transparente) e 1 (totalmente opaco). Isso cria um fundo semitransparente para o botão, mas não afeta a opacidade do texto.

Espero que te ajude.

Um abraço e bons estudos.