Gostaria de mostrar como criar rapidamente um plano de fundo translĂșcido. Se vocĂȘ usar o comando opacity no CSS, o plano de fundo certamente se tornarĂĄ transparente, mas com ele tambĂ©m tudo o que estiver nele.
Como corrigir este problema? Vasculhei a Internet e encontrei uma maneira maravilhosa, sobre a qual vou falar agora.
Digamos que este seja o seu site (html):
<html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <title> </title> </head> <body> <div class="mid"> <p> </p> . . </div> </body> </html>
A linha "" inclui uma folha de estilo CSS.
Aqui estĂĄ (Ă© chamado style.css):
body{ background: " " ; * background-attachment: fixed ; background-position: top center; } .mid{ width: 1250px;** margin: 0 auto; background: rgba(161,21,207, 0.5);*** }
Na classe mĂ©dia 3, a linha define a cor da cor translĂșcida no formato RGBA. Seus 4 dĂgitos, neste caso 0,5, sĂŁo o valor da transparĂȘncia de 0 a 1.
TĂŁo simples. Experimente, vocĂȘ certamente terĂĄ sucesso!
* - insira as imagens da URL aqui
** - defina a largura da pĂĄgina (para isso, criamos a classe no meio do cĂłdigo html)
*** - rgba Ă© a cor no formato rgb. A Ășltima letra (a) indica a transparĂȘncia do plano de fundo. Seu valor Ă© um dĂgito de 0 a 1. 0 Ă© um plano de fundo completamente transparente, respectivamente, 1 Ă© o oposto.