"Se um trabalhador quiser fazer bem o seu trabalho, ele deve primeiro afiar suas ferramentas." - Confúcio, "Os Analectos de Confúcio. Lu Linggong"
Primeira página > Programação > Como tornar uma cor de fundo transparente e ao mesmo tempo manter o texto opaco?

Como tornar uma cor de fundo transparente e ao mesmo tempo manter o texto opaco?

Publicado em 17/12/2024
Navegar:986

How to Make a Background Color Transparent While Keeping Text Opaque?

Opacidade para cor de fundo sem afetar o texto

No mundo do desenvolvimento web, alcançar a transparência é muitas vezes essencial para melhorar o apelo visual e funcionalidade dos elementos do site. Um requisito comum é aplicar transparência ao plano de fundo de um div, mantendo a opacidade do texto incluído. Isso pode representar um desafio, especialmente para garantir a compatibilidade entre navegadores.

A solução RGBA

A solução mais eficaz e amplamente suportada é utilizar o 'RGBA' ( propriedade Vermelho, Verde, Azul, Alfa). Aqui está um exemplo:

.alpha60 {
  background-color: rgba(0, 0, 0, 0.6);
}

A propriedade 'rgba' especifica a cor de fundo, bem como seu canal alfa ou transparência. Neste caso, o fundo é definido como preto com opacidade de 60%. Essa abordagem funcionará na maioria dos navegadores modernos.

IE Fallbacks

Para obter compatibilidade entre navegadores, incluindo versões mais antigas do Internet Explorer, são necessárias regras CSS adicionais:

.alpha60 {
  background-color: rgb(0, 0, 0);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

A propriedade 'rgb' define a cor de fundo substituta para o IE, enquanto as propriedades 'filter' e '-ms-filter' aplicam transparência nas versões 5.5 a 7 e 8, respectivamente.

Nota para navegadores IE

Para garantir a transparência, é essencial declarar 'background: transparente' dentro do substituto CSS para o IE. Isso garante que a cor de fundo permaneça transparente mesmo quando o suporte ao canal alfa não estiver disponível.

Tutorial mais recente Mais>

Isenção de responsabilidade: Todos os recursos fornecidos são parcialmente provenientes da Internet. Se houver qualquer violação de seus direitos autorais ou outros direitos e interesses, explique os motivos detalhados e forneça prova de direitos autorais ou direitos e interesses e envie-a para o e-mail: [email protected]. Nós cuidaremos disso para você o mais rápido possível.

Copyright© 2022 湘ICP备2022001581号-3