Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

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

por Gabrielle Ribeiro de Padua
| 21.9k xp | 3 posts

Boa tarde,

estou fazer um dos challenges de 7 dias e preciso criar um botão com o background color transparente, mas sem afetar o texto. Tentei usar a propriedade Opacity, mas ela atinge o texto deixando-o transparente também, vi opções na internet falando sobre usar RGBA para definir o background color, mas também não funcionou. Alguém poderia me auxiliar com isso?

1 resposta
solução!
por Lorena Garcia
| 8285.1k xp | 12128 posts
Alura Scuba Team Suporte Educacional

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.